如何用内半径制作边框？ [复制]答案

【问题标题】：How to make border with inside-radius? [duplicate]如何用内半径制作边框？ [复制]
【发布时间】：2015-06-01 21:24:25
【问题描述】：

我正在尝试在拐角处创建一个带有内圈的 div。它应该如下图所示

有人可以帮忙解决这个问题吗？

【问题讨论】：

不确定这是否只能用 css 解决。看看这个 jquery 插件：malsup.com/jquery/corner
如果你只需要CSS 的解决方案，你可以这样做...jsfiddle.net/gmolop/1aragjcf

标签： html css

【解决方案1】：

你可以这样做：

.box {
  width: 200px;
  height: 200px;
  background:
    radial-gradient(circle at 0 100%, transparent 14px, red 15px) bottom left,
    radial-gradient(circle at 100% 100%, transparent 14px, red 15px) bottom right,
    radial-gradient(circle at 100% 0, transparent 14px, red 15px) top right,
    radial-gradient(circle at 0 0, transparent 14px, red 15px) top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

&lt;div class="box"&gt;&lt;/div&gt;

更多信息：Inset border-radius with CSS3

但是（！）如果您需要更复杂的边框形状，您可以使用背景图片或边框图片：

.box{
  width: 200px;
  height: 200px;
  background: #EEE;
  border: 30px solid transparent;
  border-image: url("http://i62.tinypic.com/2dh8y1g.jpg") 100 round;
}

&lt;div class="box"&gt;&lt;/div&gt;

更多信息：Decorative border css

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
感谢您的建议，这非常有道理，尽管有时我无法通过参考 2 个或更多帖子而不是复制他们的答案来思考如何回答。