渐变
文章目录
1.线性渐变
- 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
- ！！渐变是图片，需要通过background-image来设置
线性渐变，颜色沿着一条直线发生变化
background-image:linear-gradient(red，yellow)
background-image:linear-gradient(to right red，yellow)
/*线性渐变的开头可以指定渐变方向，例如to left ，right，bottom，top，可进行组合，也可以用度数表示xxxdeg，例如90deg，turn表示圈，例如0.25turn。
渐变可以指定多种颜色，一般默认值平均分配*/
background image:linear-gradient(red 50px,yellow)
/*后面的像素为指定渐变从哪里开始，如上所示，那么50px前都是纯红色，可利用这点调整分布的区域*/
background-image: repeating-linear-gradient(red 50px, yellow 100px);
/*代表表示从50-100的渐变效果，若box的高度为200，那么则会进行四遍填充*/
2.径向渐变
radial-gradient() 径向渐变(放射性的效果)
默认情况下径向渐变的形状根据元素的形状来计算的
-
正方形 --> 圆形
-
长方形 --> 椭圆形
-
我们也可以手动指定径向渐变的大小
-
circle
-
ellipse
background-image: radial-gradient(red, yellow);
background-image: radial-gradient(circle, red, yellow);/*正圆，若为ellipse则为椭圆*/
background-image: radial-gradient(at left, red, yellow);/*指定位置*/
/*指定位置：top，right，left，bottom，center*/
background-image: radial-gradient(100px 200px, red, yellow);/*前面的数字用于指定大小，对应长和宽*/
background-image: radial-gradient(circle at 50px 100px, red 50px, yellow 100px);
background-image: repeating-radial-gradient(circle at 50px 100px, red 50px, yellow 100px);/*repeat属性，用于重复50-100px的渐变效果*/
- closest-side 近边
- farthest-side 远边
- closest-corner 近角
- farthest-corner 远角
以上为渐变效果在屏幕上的显示
background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)