渐变

文章目录

• 渐变
• • 1.线性渐变
  • 2.径向渐变

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)

标签：14,gradient,渐变,yellow,background,image,red
来源： https://blog.csdn.net/Edshine/article/details/120597491