html 在border-image中添加多个渐变？

bq8i3lrv 于 2022-11-27 发布在其他

关注(0)|答案(2)|浏览(176)

对于background-image，您可以添加任意数量的radial-gradient和/或linear-gradient。但是对于border-image，您似乎只能添加一个。如果您觉得这很奇怪，因为如何显示渐变的原理应该是相同的边界和背景，对吗？
有没有办法在border-image中添加多个渐变？我只对纯CSS解决方案感兴趣。
这不起作用，因为它包含多个渐变：

div {
  height: 30px;
  width: 40px; 
  border: 50px solid black;
  border-image: 
  radial-gradient(circle at 20px 30px, green 20px, rgba(0,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, green 20px, rgba(0, 0, 255, .5) 20px);
}

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

Html

来源：https://stackoverflow.com/questions/37986484/add-more-than-one-gradient-in-border-image

2条答案

按热度按时间

hzbexzde1#

不能，不能将多个图像设置为border-image速记或border-image-source普通文字属性。
根据border-image-source的规范，我们可以看到只有一个图像层被指定为值。
名称：边框图像源
数值：无|
而对于background-image，我们可以看到指定了多个层。
名称：背景-图像
值：[，]*
以下是从引入背景图像分层的规范中摘录的内容：（强调我）
在CSS3中，方块的背景可以有多个图层。***图层数目由'background-image'属性中逗号分隔值的数目***决定。

赞(0）回复(0）举报 2022-11-27

xdyibdwo2#

只是在我寻找同样的东西时结结巴巴地回答了这个问题。但对其他人来说，尝试这样做：
你可以只添加一个伪元素，并给予它一个边框。我猜你会使用transparent，因为否则多个渐变将完全不可见。
我得到了以下信息：

h1{
    --border-width: 5px;

    border-width: var(--border-width);
    border-style: solid;
    border-image: linear-gradient(135deg, #ff0000, transparent 20%);
    border-image-slice: 1;
    font-size: 5rem;
    position: relative;
}
h1::after{
    position: absolute;
    inset: calc(var(--border-width) * -1);
    content: '';
    background: transparent;
    border-width: var(--border-width);
    border-style: solid;
    border-image: linear-gradient(135deg, transparent 80%, #ff0000 100%);
    border-image-slice: 1;
}

我将pseudo元素的inset设置为负border-width，以确保它与父元素的边框对齐。

赞(0）回复(0）举报 2022-11-27

我来回答

html 在border-image中添加多个渐变？

2条答案

相关问题

热门标签

最新问答