Question

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

中的完整示例

#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解决方案，将它们隔开几个像素。虽然我很高兴听到其他问题

Answer 1

您可以使用这样的背景来做到这一点：

#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>

如何使用带有边界图像的径向渐变

1 个答案: