如何将径向渐变与边框图像一起使用



我正在尝试使用源为径向渐变的边框图像。我看过很多带有图像的示例,但没有看到带有径向渐变的示例。

我的代码笔中的完整示例

#main {
width: 200px;
border: 8px solid red;
padding: 10px;
border-image:
radial-gradient( farthest-corner, #777 50%, #7770 60%)  /* source */
28 /                    /* slice */
8px 8px 8px 8px /    /* width */
4px 4px 4px 4px       /* outset */
round;                  /* repeat */
}

我只想将盒子包围在间隔几个像素的小圆圈中,最好使用仅使用 CSS 解决方案。虽然我很高兴听到其他问题

你可以像这样用这样的背景来做到这一点:

#main {
width: 200px;
padding:10px;
background: 
radial-gradient(circle at center, #777 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-x;
}
<div id="main">This element is surrounded by a radial-gradient-based border image!</div>

如果你想要所有的侧面,你可以这样做:

#main {
width: 200px;
padding:13px 10px;
background: 
radial-gradient(circle at center, #777 60%, transparent 61%) top left/10px 10px repeat-x,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-x,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-y,
radial-gradient(circle at center, #777 60%, transparent 61%) bottom right/10px 10px repeat-y;
}
<div id="main">This element is surrounded by a radial-gradient-based border image!</div>

相关内容

  • 没有找到相关文章

最新更新