首页 前端知识 css渐变

css渐变

2024-04-09 23:04:42 前端知识 前端哥 102 541 我要收藏

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

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

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

代码:

 结果:

 属性延伸:

(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%)

代码:

 结果:

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

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

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

(2)设置渐变形状

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

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

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

3.  重复渐变

图示:

 代码:

 结果:

 代码:

 结果:

4.太极小练习:

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

代码:

结果:

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4689.html
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!