线性渐变

时间 2020-09-26

原文原文链接

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>html

.box1{
width: 300px;
height: 300px;
margin: 100px auto;浏览器

/*background-color: yellow;*/htm

/*
渐变背景不是背景颜色，而是图片
因此咱们须要经过background-image
或 background 来设置渐变的效果图片

linear-gradient() 线性渐变
radial-gradient() 径向渐变
*/it

background-image: linear-gradient(red, yellow);
background-image: linear-gradient(green, blue);
/*线性渐变默认是自上向下进行变化*/
background-image: linear-gradient(red, orange, yellow, greenyellow);
/*
能够关键字来指定渐变的方向：
to top 向上渐变
to right 向右渐变
to bottom 向下渐变
to left 向左渐变
*/
background-image: linear-gradient(to left top, red, orange, yellow, greenyellow);
background-image: linear-gradient(90deg, red, orange, yellow, greenyellow);
background-image: linear-gradient(red, orange, yellow, greenyellow);
/*
默认状况下，渐变的颜色在元素中是平均分布
*/
/*
能够在颜色后，指定颜色的范围开始位置，结束位置，这种语法不支持老版本的浏览器
*/
/*background-image: linear-gradient(red 0px 150px, yellow 150px 300px);*/io

/*
颜色后边能够指定一个长度，用来指定颜色的起始位置
*/
background-image: linear-gradient(red 100px, yellow 300px);
background-image: linear-gradient(red 20%, orange 40%, yellow 60%, greenyellow 80%);class

background-image: repeating-linear-gradient(red 50px, yellow 100px , orange 200px);meta

background-image: linear-gradient(red 100px, yellow 300px);语法

/*background-position: 200px 100px;*/im

background: linear-gradient(greenyellow, skyblue);

}

</style>
</head>
<body>

</body></html>