位置: IT常识 - 正文
css渐变(CSS渐变背景应用)
发布时间：2024-01-17推荐整理分享css渐变(CSS渐变背景应用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css渐变色,css渐变背景色,css渐变背景,css渐变字体,css渐变色代码,css渐变背景色,css渐变色,css渐变色代码,内容如对您有帮助，希望把文章链接给更多的朋友！
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”伪元素，和线性渐变的知识：
代码：
结果：
上一篇：【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总（附源码）(常用的css样式有哪些)
下一篇：使用 JavaScript 的响应式计数器动画(javascript怎么用)
