1. 首页
  2. css

CSS重复渐变

重复渐变采用了我们已经可以在linear-gradient()radial-gradient()符号上创造性地使用color-stops的技巧,并为我们烘焙了它。

这个想法是我们可以用我们创建的渐变创建模式,并允许它们无限重复。

比较线性渐变(左)一个重复的线性渐变(右)。

有一个技巧,使用非重复渐变,创建渐变的方式是,如果它是一个小矩形,它将与其他小矩形版本的自身对齐,以创建一个重复的图案。所以基本上创建这个渐变,设置background-size来创建这个小矩形。这样就可以很容易地制作条纹,然后可以旋转或其他任何形式。

语法

有三种类型的重复渐变,其中两种当前在官方规范中受支持,另一种在当前的工作草案中受支持。

每个符号的语法与其相关的渐变类型相同。例如,repeating-linear-gradient()遵循与linear-gradient()相同的语法。

conic-gradient()

重复渐变 相关符号 支持吗?
repeating-linear-gradient() linear-gradient()
repeating-radial-gradient radial-gradient()
<10***

其中渐变重复由最终颜色停止决定。如果这是在20px,梯度的大小(然后重复)是20px20px的平方。如果有多个颜色链接到图案,则情况也是如此。带有最终停止的最终颜色决定了重复的大小和位置。

.repeat {background-image:repeating-linear-gradient(45deg,yellow,yellow 10px,red 10px,red 20px /* determines size */);}

与radial相同:

.repeat {background:repeating-radial-gradient(circle at 0 0,#eee,#ccc 50px);}

浏览器支持

重复渐变目前享受着很好的浏览器支持。也就是说,在撰写本文时,我们只讨论线性和径向梯度,因为锥形梯度仍然是规范第4级工作草案中提出的特征。希望在候选人推荐中我们能看到它的广泛应用。

这个浏览器支持数据来自Caniuse,它有更多的细节。数字表示浏览器支持该版本及更高版本的功能。

桌面

<IE

<Safari

<10*

<3.6*

<5.1*

Chrome Firefox Edge
<10 <12

Mobile/91

  • CSS图像值和替换的内容模块级别3:这是在官方规范中引入了重复渐变的概念,但仅适用于重复线性和径向渐变
  • SS图像值和替换的内容模块级别4:这是当前的工作草案,其中考虑将锥形渐变包含到官方规范中。
  • CSS3图案库:Lea Verou展示了复杂的渐变图案,包括许多使用重复渐变技术的图案。

CSS重复渐变 为WP2原创文章,链接:https://www.wp2.cn/css/css%e9%87%8d%e5%a4%8d%e6%b8%90%e5%8f%98/

发表评论

您的电子邮箱地址不会被公开。