直接开始,不整那些玄乎的:
渐变:通过渐变可以设置一些复杂的背景颜色,可以从实现一个颜色向其他颜色过渡的效果 | |
渐变是图片,通过 background-image设置 | |
可选值 | |
1:linear-gradient(方位,颜色1,颜色2) ['ɡreidiənt] | |
线性渐变,颜色沿着一条直线发生变化 | |
参数1:表示方位,(可选值,不写默认是to bottom) | |
(1)to left,to right, to bottom, to top | |
(2)xxxdeg 表示角度,度数,会更灵活 | |
(3)turn 表示圈 .5turn | |
参数2:颜色1 | |
参数3:颜色2 | |
注意: | |
可以写多个颜色,默认情况下,颜色是均分占比的 | |
也可以手动的指定渐变的分布情况 | |
background-image:linear-gradient(red 50px,yellow) ; | |
颜色后直接跟占比 | |
2:repeating-linear-gradient() | |
可以平铺的线性渐变 | |
background-image: repeating-linear-gradient(yellow 0px, red 50px); | |
参数跟linear-gradient是一样的 |
1:radial-gradient() ['reidiəl] ['ɡreidiənt] | |
经向渐变(放射性的效果) | |
默认情况下,圆心是根据元素的形状来计算的 | |
正方形 圆形 | |
长方形 椭圆型 | |
参数1:圆心的形状 | |
(1)circle圆形,ellipse椭圆, | |
(2)设置的大小 at 位置==>像素1 像素2 at 0px 0px | |
background-image: radial-gradient(100px 100px at 100px 0px,red,yellow); | |
参数2:颜色1 | |
参数3:颜色2 | |
······ |