html – 在边框图像中添加多个渐变？

概述对于背景图像,您可以添加所需的径向渐变和/或线性渐变.但对于边框图像,似乎只能添加一个.如果觉得很奇怪,因为如何显示渐变的原则应该是相同的边框和背景,对吧？ 有没有办法在border-image中添加多个渐变？我只对纯CSS解决方案感兴趣. 这不起作用,因为它包含多个渐变： div { height: 30px; width: 40px; border: 50px solid bla 对于背景图像,您可以添加所需的径向渐变和/或线性渐变.但对于边框图像,似乎只能添加一个.如果觉得很奇怪,因为如何显示渐变的原则应该是相同的边框和背景,对吧？

有没有办法在border-image中添加多个渐变？我只对纯CSS解决方案感兴趣.

这不起作用,因为它包含多个渐变：

div {  height: 30px;  wIDth: 40px;   border: 50px solID black;  border-image:   radial-gradIEnt(circle at 20px 30px,green 20px,rgba(0,255,.5) 20px),radial-gradIEnt(30deg,blue 22px,red 22px);}

https://jsfiddle.net/thadeuszlay/p6r2p78g/

这有效,但只包含一个渐变：

div {  height: 30px;  wIDth: 40px;  border: 50px solID black;  border-image: radial-gradIEnt(circle at 20px 30px,.5) 20px);}

https://jsfiddle.net/thadeuszlay/p6r2p78g/1/

解决方法 不,您不能将多个图像设置为border-image速记或border-image-source longhand属性.

根据border-image-source的规格,我们可以看到只有一个图像层被指定为值.

name: border-image-source

Value: none | <image>

而对于background-image,我们可以看到指定了多个图层.

name: background-image

Value: <bg-image> [,<bg-image> ]*

以下是spec which introduces layering of background images的摘录:(强调我的)

The background of a Box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the ‘background-image’ property.

总结

以上是内存溢出为你收集整理的html – 在边框图像中添加多个渐变？全部内容，希望文章能够帮你解决html – 在边框图像中添加多个渐变？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。