使用 CSS3 插入边框半径答案

【问题标题】：Inset border-radius with CSS3使用 CSS3 插入边框半径
【发布时间】：2012-06-17 12:24:04
【问题描述】：

有没有办法用 css3 创建内嵌边框半径？（无图片）

我需要这样的边框半径：

【问题讨论】：

只是为了验证，插入角是否必须是透明的（如上图所示）？
检查我对类似问题的解决方案stackoverflow.com/questions/8929173/…
@ogur 这不会解决问题，因为这些圆角在元素之外......
是的，角落必须是透明的

【解决方案1】：

body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}

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

</body>
</html>

Example here

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些即时帮助。正确解释would greatly improve 其教育价值，通过展示为什么这是一个很好的解决问题的方法，并将使其对未来有类似但不相同问题的读者更有用。请edit您的答案添加解释，并说明适用的限制和假设。

【解决方案2】：

您可以通过将透明圆形元素绝对定位在带有盒子阴影的角落中来实现这一点。我使用了隐藏溢出divs 的组合，其中包含跨度、框阴影、边框和伪选择器。

查看我的example。

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

a {
  display: inline-block;
  width: 250px;
  height: 100px;
  background: #ccc;
  border: 2px solid #000;
  position: relative;
  margin: 10px;
}

a div {
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 15px;
  height: 100%;
}

a div:after {
  content: '';
  background: #000;
  width: 2px;
  height: 75px;
  position: absolute;
  top: 12.5px;
}

a div:first-of-type {
  left: -14px;
}

a div:first-of-type:after {
  left: 0;
}

a div:last-of-type {
  right: -14px;
}

a div:last-of-type:after {
  right: 0;
}

a span {
  display: block;
  width: 30px;
  height: 30px;
  background: transparent;
  position: absolute;
  bottom: -20px;
  right: -20px;
  border: 2px solid #000;
  border-radius: 25px;
  box-shadow: 0 0 0 60px #ccc;
}

a div:first-of-type span {
  left: -20px;
}

a div:first-of-type span:first-child {
  top: -20px;
}

a div:first-of-type span:last-child {
  bottom: -20px;
}

a div:last-of-type span {
  right: -20px;
}

a div:last-of-type span:first-child {
  top: -20px;
}

a div:last-of-type span:last-child {
  bottom: -20px;
}

<a href="">
  <div>
    <span></span>
    <span></span>
  </div>

  <div>
    <span></span>
    <span></span>
  </div>
</a>

【讨论】：

【解决方案3】：

我发现使用所有 CSS 和 HTML（无图像等）实现此目的的最佳方法是 using CSS3 gradients，根据 Lea Verou。从她的解决方案：

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

最终结果是一组带有曲线的透明渐变。请参阅完整的 JSFiddle 以获取演示并试用它的外观。

显然，这取决于对rgba 和gradient 的支持，因此应该被视为渐进式增强，或者如果它对设计至关重要，则应该为旧浏览器（尤其是 IE，不支持 gradient 甚至到 IE9)。

【讨论】：

【解决方案4】：

body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}

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

</body>
</html>

【讨论】：

【解决方案5】：

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

在此处查看我的示例http://jsfiddle.net/TdDtX/

#box {
    position: relative;
    margin: 30px;
    width: 200px;
    height: 100px;
    background: #ccc;
    border: 1px solid #333;
}

.corner {
    position: absolute;
    height: 10px;
    width: 10px;
    border: 1px solid #333;
    background-color: #fff;
}

.top-left {
    top: -1px;
    left: -1px;
    border-radius: 0 0 100% 0;
    border-width: 0 1px 1px 0;
}

.top-right {
    top: -1px;
    left: 190px;
    border-radius: 0 0 0 100%;
    border-width: 0 0 1px 1px;
}

.bottom-left {
    top: 90px;
    left: -1px;
    border-radius: 0 100% 0 0;
    border-width: 1px 1px 0 0;
}

.bottom-right {
    top: 90px;
    left: 190px;
    border-radius: 100% 0 0 0;
    border-width: 1px 0 0 1px;
}

<div id="box">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</div>

【讨论】：

【解决方案6】：

嗯，你可以利用这里的这个小技巧来创建Inset Border Radius

然后，为了支持透明度，您可能必须在其间添加其他块。或多或少像过去的圆形图像的处理方式；透明图像的每个角落都有一个跨度。并跨越两侧和顶部以填补空白。您可以使用这个技巧在 CSS 中完成，而不是使用图像。

【讨论】：

【解决方案7】：

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

编辑：

即使您将盒子分解成更小的部分，在某些时候您仍然需要创建一个透明的内嵌角。透明度是一个棘手的部分，它可能会在没有图像的情况下阻止这一点。基本上，你必须能够用不透明的 bg 渲染一个透明的圆圈（如果这在 CSS 中是可能的，我很想知道如何:)

如果您不需要透明度，有办法做到这一点。

【讨论】：

尽管你说它不起作用，但我从未真正尝试过。可惜它不起作用，本来是一个很好的功能 imo

【解决方案8】：

您可以使用新的 css3-Border-images 来实现此效果（嗯，它是图像，但它可以毫无问题地缩放）。但这是相当新的，还没有得到广泛的支持（在所有像样的浏览器（有前缀）中，除了 IE；）。

csstricks 上一篇关于边框图像的好文章。

Browser Support

【讨论】：