【渐变】
线性渐变：从一个位置开始向某个特定的方向渐变，如叶片
径向渐变：从一个位置开始向四周渐变，如灯光散落
linear-gradient()函数用于生成线性渐变图片，可接收多个参数，每个参数是一个色彩值
色彩值后面跟一个尺寸值或百分比值，表示该颜色的停止位置
div{
width: 50em;
height: 20em;
font-size: 10px;
background-image: linear-gradient(
to right,
orangered 0%,
orange 10%,
gold 20%,
lightgreen 30%,
cyan 40%);
}
锐利的线性渐变
在两个色彩值之间，系统会自动计算插值，如果想获得锐利的渐变效果，就要在同一个停止位置写两个色彩值，它们之间将没有插值
div{
width: 50em;
height: 20em;
font-size: 10px;
background-image: linear-gradient(
to right,
orangered 0%,
orange 10%, orange 20%,
gold 20%, gold 30%,
lightgreen 30%, lightgreen 40%,
cyan 40%);
}
线性渐变的角度
可以在渐变序列前指定一个角度值，表示渐变将从此位置开始。
起始位置是一个角度值，介于0度和360度之间，0度位于容器底部，也就是渐变将从底部向顶部延伸
默认值是180度，即渐变从顶部向底部延伸
to top表示渐变从下到上延伸，相当于0度
to right表示渐变从左到右延伸，相当于90度
to right bottom表示向渐变从左上到右下延伸
有透明度的线性渐变
画点线
渐变图片宽8em，0-4em是黑色，4-5em是透明色，5-7em是黑色，7-8em是透明色
body{
background-color: lightyellow;
}
div{
width:32em;
height: 0.5em;
font-size: 10px;
background-image: linear-gradient(
to right,
black 0, black 4em,
transparent 4em, transparent 5em,
black 5em, black 7em,
transparent 7em, transparent 8em
);
background-size: 8em;
margin:3em;
}
【透明的径向渐变】
div{
width: 9em;
height: 9em;
background-color: black;
border-radius: 50%;
background-image: repeating-radial-gradient(
transparent 0,
transparent 0.95em,
darkgreen 0.95em,
darkgreen 1em);
}
网友评论