使用CSS3插入边界半径

有没有办法用css3创建插入边界半径？（无图像）

我需要这样的边界半径：

---

看起来这不可能。我尝试了一个带负值的边界半径，只是想看看会发生什么，但没有效果

编辑：

即使将长方体分解为更小的部分，在某个点上仍然必须创建一个透明的插入角。透明度是一个棘手的部分，它可能会阻止在没有图像的情况下实现这一点。基本上，你必须能够渲染一个透明的圆，周围有一个非透明的背景（如果在CSS中可以，我想知道怎么做：）

---

如果你不需要透明，有很多方法可以做到。

我认为如果角必须是透明的，这是不可能的，但是如果背景已知，你可以在每个角上创建一个带有圆形边框的div。如果这些div被赋予与页面背景相同的背景色，那么效果就会起作用

看到我的例子了吗

#框{
位置：相对位置；
利润率：30像素；
宽度：200px；
高度：100px；
背景：#ccc；
边框：1px实心#333；
}
.拐角处{
位置：绝对位置；
高度：10px；
宽度：10px；
边框：1px实心#333；
背景色：#fff；
}
.左上角{
顶部：-1px；
左：-1px；
边界半径：0 100%0；
边框宽度：0 1px 1px 0；
}
.右上角{
顶部：-1px；
左：190px；
边界半径：01100%；
边框宽度：0 1px 1px；
}
.左下角{
顶部：90px；
左：-1px；
边界半径：0 100%0 0；
边框宽度：1px1p0；
}
.右下角{
顶部：90px；
左：190px；
边界半径：100%0；
边框宽度：1px 0 0 1px；
}

---

您可以使用新的css3边框图像（虽然是图像，但它的缩放没有问题）实现此效果。但这是非常新的，并且还没有得到广泛的支持（准确地说，除了IE之外，在所有体面的浏览器（带有前缀）中都得到了很好的支持）

这是一篇关于地图上边界图像的好文章

---

嗯，你可以利用这里的这个小技巧来创造

---

然后，为了支持透明度，您可能需要在中间添加其他块。多少有点像以前的圆形图像；具有透明图像的每个角落的跨度。并在侧面和顶部跨越，以填补空白。不用图像，你可以用这个技巧在CSS中实现它。

我发现用所有CSS和HTML（无图像等）实现这一点的最好方法是通过，每Lea Verou。从她的解决方案来看：

div.round{
背景：
-moz径向梯度（0 100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-moz径向梯度（100%100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-moz径向梯度（100%0，圆形，rgba（204,0,0,0）14px，#c00 15px），
-moz径向梯度（0，圆，rgba（204,0,0,0）14px，#c00 15px）；
背景：
-o-径向梯度（0 100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-o-径向梯度（100%100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-o-径向梯度（100%0，圆形，rgba（204,0,0,0）14px，#c00 15px），
-o-径向梯度（0，圆，rgba（204,0,0,0）14px，#c00 15px）；
背景：
-webkit径向梯度（0 100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-webkit径向梯度（100%100%，圆形，rgba（204,0,0,0）14px，#c00 15px），
-webkit径向梯度（100%0，圆形，rgba（204,0,0,0）14px，#c00 15px），
-webkit径向梯度（0 0，圆形，rgba（204,0,0,0）14px，#c00 15px）；
背景位置：左下、右下、右上、左上；
-moz背景大小：50%50%；
-webkit背景大小：50%50%；
背景大小：50%50%；
背景重复：无重复；
}

最终结果是一组带有曲线的透明渐变。查看完整的演示，并按照其外观进行操作

显然，这取决于对

rgba

和

gradient

的支持，因此应将其视为渐进式增强，或者如果这对设计至关重要，则应为较旧的浏览器提供基于图像的回退（尤其是IE，它甚至不支持通过IE9实现的

gradient

）

正文{
背景：#fff；
}
.分区{
位置：相对位置；
}
.盒子{
背景：#f7f7f7；
高度：178px；
宽度：409px；
利润率：25px；
/*填充：20px*/
位置：相对位置；
溢出：隐藏；
边框：1px实心#ccc；
左边框：0px；
}
.盒子：以前{
内容：“；
显示：块；
背景：#fff；
位置：绝对位置；
顶部：-33px；
左：-263px；
宽度：300px；
身高：242px；
边界半径：300px；
边框：1px实心#ccc；
}

---

您可以通过将透明圆元素绝对定位在带有方框阴影的角落中来实现这一点。我使用了隐藏溢出的

div

s的组合，其中包含跨距、框阴影、边框和伪选择器

看看我的

这是入门所需的基本HTML和CSS：

a{
显示：内联块；
宽度：250px；
高度：100px；
背景：#ccc；
边框：2倍实心#000；
位置：相对位置；
利润率：10px；
}
潜水艇{
位置：绝对位置；
排名：0；
溢出：隐藏；
宽度：15px；
身高：100%；
}
a组：之后{
内容：''；
背景：#000；
宽度：2倍；
高度：75px；
位置：绝对位置；
顶部：12.5px；
}
a div：类型的第一个{
左-14px；
}
a div:type的第一个：after{
左：0；
}
a div：最后一种类型{
右图：-14px；
}
a div:type的最后一个：after{
右：0；
}
跨度{
显示：块；
宽度：30px；
高度：30px；
背景：透明；
位置：绝对位置；
底部：-20px；
右：-20px；
边框：2倍实心#000；
边界半径：25px；
盒影：0 60px#ccc；
}
a div：类型span的第一个{
左：-20px；
}