CSS3之颜色渐变效果

最新推荐文章于 2024-06-08 08:33:20 发布

梦之翼618720

最新推荐文章于 2024-06-08 08:33:20 发布

阅读量720

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_40112624/article/details/126875678

版权

1.1这四个颜色渐变函数的兼容性都一样，先来看路径渐变linear-gradient()的几个个背景渐变色的示例：
在这里插入图片描述

1、 background-image: linear-gradient( #CD853F, #CD69C9);/* 默认方向自下向上 /
2、 background-image: linear-gradient(to left,#CD853F, #CD69C9);/ 自右向左 /
3、 background-image: linear-gradient(to left,#CD853F 50px, #CD69C9); / 自右向左起始颜色在50px位置开始渐变 /
4、 background-image: linear-gradient(to top left,#CD853F , #CD69C9);/ 自右下向左上渐变 /
5、 background-image: linear-gradient(30deg , #CD853F , #CD69C9);/ 30度位置开始渐变 /
语法：linear-gradient(渐变角度，起始颜色起始渐变位置，结束颜色结束渐变的位置)；
linear-gradient(90deg, #64ACFE 30%, #ffffff 0)无渐变色
linear-gradient(90deg, #64ACFE 30%, #ffffff)有渐变色
1.2经向渐变radial-gradient()的渐变示例：

1 / 起始渐变色,结束渐变色 – 其他所有值默认*/
2 background-image: radial-gradient( #ff0,#009);
3 /* 起始渐变色起始渐变位置(可以设置像素值百分比),结束渐变色结束渐变位置*/
4 background-image: radial-gradient(#ff0 20px, #009 90px);
5 /* 扩散形状为圆形(默认椭圆), 起始渐变色起始渐变位置, 结束渐变色结算渐变位置 /
6 background-image: radial-gradient(circle,#ff0 20px, #009 70px);
7 / 扩散形状圆形 at 圆心位置在左上角(可以设置像素值百分比), 起始渐变色起始渐变位置, 结束渐变色结算渐变位置 /
8 background-image: radial-gradient(circle at top left,#ff0 0px, #009 230px);
9 / 扩散形状圆形半径大小(到最近的边) at 圆心位置在50px*² , 起始渐变色起始渐变位置, 结束渐变色结算渐变位置 /
10 background-image: radial-gradient(circle closest-side at 50px 50px,#ff0 20px, #009 70px);
11 / 半径大小共有四个值分别是： */
12 closest-side：半径距离从圆心到最近的边的距离
13 closest-corner：半径距离从圆心到最近的角的距离
14 farthest-side：半径距离从圆心到最远的边的距离
15 farthest-corner：半径距离从圆心到最远的角的距离