如何与半径内界形成边界？ [重复]

Question

这个问题已经在这里有了答案：

• 用CSS3插入边框半径 8个答案

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

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

Answer 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; } 

 <div class="box"></div> 

更多信息： 使用CSS3插入边框半径

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

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

 <div class="box"></div> 

更多信息： 装饰边框css