37

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

我需要这样的边界半径：

嵌入边界半径

4

8 回答 8

36

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

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以获取演示并尝试使用它的外观。

显然，这取决于对rgbaand的支持gradient，因此应该被视为渐进增强，或者如果它对设计至关重要，则应该为旧浏览器提供基于图像的回退（尤其是 IE，它gradient甚至不支持 IE9 ）。

于 2013-01-21T13:07:44.460 回答
11

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

看看我的例子。

这是您入门所需的基本 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>

于 2014-03-17T17:39:39.457 回答
7

我认为如果角落必须是透明的，这是不可能的，但是如果背景是已知的，您可以在每个角落创建一个带有圆形边框的 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>

于 2012-06-14T13:19:04.467 回答
2

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

编辑：

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

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

于 2012-06-14T13:05:49.860 回答
2

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

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

浏览器支持

于 2012-06-14T13:23:32.033 回答
2 

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>

这里的例子

于 2013-11-18T07:24:08.140 回答
0

嗯，您可以在这里使用这个小技巧来创建插入边框半径

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

于 2012-07-14T12:45:06.440 回答
0 

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>

于 2018-01-10T17:24:45.620 回答