css渐变

 1.  线性渐变(是从一个方向到另一个方向的渐变)

属性值:background:linear-gradient(颜色)

✍默认值:从上到下线性渐变: 

代码:

css渐变_第1张图片

 结果:

css渐变_第2张图片

 属性延伸:

(1)改变渐变方向:

从下到上:background:linear-gradient(to top yellow,green)

从左到右:background:linear-gradient(to right yellow,green)

从右到左:background:linear-gradient(to left yellow,green)

从左上到右下:background:linear-gradient(to bottom right yellow,green)

(2)改为任意角度的渐变

属性:background:linear-gradient(50deg yellow,green)

含义是:从红色到绿色50°渐变;

0°渐变是:红色从下到上渐变为绿色;90°是从左到右;180°是从上到下;270°是从右到左

2.  径向渐变(从一个小点到四周的渐变)

属性:background:radial-gradient(颜色值)

(1)不规则颜色渐变:background:radial-gradient (yellow 30%,orange 50%,green 80%)

代码:

css渐变_第3张图片

 结果:

css渐变_第4张图片

 这个百分比的含义是,拿上面的代码说明:黄色到盒子30%的位置开始渐变为橙色,30%以前不渐变都是黄色,橙色从50%的位置开始渐变为绿色,80%以后都是纯绿色。

还有一个极端一点的:background:radial-gradient(red 50%,bule 50%)

含义是:红色从50%位置开始渐变,而50%以后都是蓝色,所以从50%-50%之间没有渐变,所以两个纯色的圆,前50%是红色,后50%是蓝色。

(2)设置渐变形状

css渐变_第5张图片

(3)改变中心点的位置和改变渐变的大小

css渐变_第6张图片

 x轴60%,y轴40%的位置,坐标原点在左下角,,,

如果属性不好用了,可以在前面加:“-webkit-”(google浏览器特定的格式,其他浏览器可以去百度查查)

3.  重复渐变

图示:

css渐变_第7张图片css渐变_第8张图片

 代码:

css渐变_第9张图片

 结果:

css渐变_第10张图片

 代码:

css渐变_第11张图片

 结果:

css渐变_第12张图片

4.太极小练习:

用到“::before”和“::after”伪元素,和线性渐变的知识:

代码:

css渐变_第13张图片

结果:

css渐变_第14张图片

 

你可能感兴趣的:(web前端开发,css,前端,html,css3,web)