如何在盒子及其边框内制作圆角？

Question

我想标题很难理解，所以我会解释。 我想要达到这个效果：

（一个圆角及其边框，也有圆角边框）。

我已成功使用background-clip属性：

（边框为圆角，内框为不）

问题是，如何实现内盒的圆角？

谢谢！

修改

我正在使用的HTML：

<header class="body template-bg template-border radius-all">
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </nav>
    </header>

CSS：

.radius-all {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.template-bg {
  background: #FFF;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.template-border {
  border: 5px solid rgba(255, 255, 255, 0.2);
}

Answer 1

内部边界计算

首先，您需要删除-vendor-background-clip: padding-box或将其设置为默认值border-box才能达到内边框半径。

内边界半径计算为外边界半径（border-radius）与边框宽度（border-width）之差，以便

inner border radius = outer border radius - border width

每当border-width大于border-radius时，内边界半径为负，你会得到一些尴尬的倒角。目前，我认为没有用于调整inner-border-radius的属性，因此您需要手动计算。

在你的情况下：

inner border radius = 6px - 5px = 1px

你的新CSS应该是：

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

只需从border-radius值（5px）中减去border-width（6px）值，即可获得所需的内边界半径：

---

适用于我的代码

在Firefox 3.x，Google Chrome和Safari 5.0上测试

 .radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */

---

在JavaScript中添加颜色叠加层

<script type="text/javascript">
    var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;

    // insert opacity decreasing code here for hexadecimal

    var header = document.getElementsByTagName('header')[0];
    header.style.backgroundColor = bodyBgColor;
</script>

我不完全确定如何在JavaScript中进行十六进制算术，但我确信您可以在Google中找到算法。

---

应用常规边框

您是否通过其<div>属性为您的边境使用单独的框background？如果是这样，您需要在边框和内框上应用border-radius及其供应商特定属性：

<div id="border-box" style="border-radius: 5px;">
    <div id="inner-box" style="border-radius: 5px;">
    </div>
</div>

一种更有效的方法就是让内盒管理自己的边界：

<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
    <!-- Content -->
</div>

CSS-wise，您可以声明一个.rounded-border类并将其应用于每个具有圆形边框的框：

.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

将该类应用于任何具有圆形边框的框：

<div id="border-box" class="rounded-borders">
    <div id="inner-box" class="rounded-borders">
    </div>
</div>

对于单个框元素，您仍然需要声明边框大小才能显示：

<style type="text/css">
    #inner-box { border: 4px solid blue; }
</style>

<div id="inner-box" class="rounded-borders">
</div>

Answer 2

另一个解决方案是使匹配的内边框和外边框与border-radius结合，使用box-shadow属性的<spread-radius>值“伪造”边框。这会产生一个坚实的阴影，可以很容易地通过一个规则的边界。

例如，要获得4px边框和4px白色边框半径，请尝试以下操作：

/* rounded corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 0px 4px #fff;
box-shadow: 0px 0px 0px 4px #fff;

如果你想为整个容器添加一个“真正的”阴影，你可以简单地链接阴影语句，如下所示：

/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);
box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);

注意：请注意，语句的顺序是它的呈现顺序。

唯一需要注意的是，最初的“人造边框”将与你想要的任何阴影的前X个像素（其中X是边框的宽度）重叠（并且如果你使用RGBa则合并）不透明度低于100％。）

所以它不会在所有情况下起作用，但它会获得多数。当常规边界不理想时，我经常使用它。

Answer 3

由于CSS没有inner-border-radius这样的东西，浏览器将其默认为border-radius - border-width。如果您不喜欢这样，典型的解决方案是创建两个带边框的div来模仿内边界半径，但此解决方案为html带来了更多设计。如果它是在整个网站中使用的常见边界模板，那也是一种痛苦。

我设法通过使用:after和content: ""生成内部div来设法将其全部保存在css中。因此，对于您的情况，它将是：

.template-border {
    position: relative;
    border-radius: 5px;
    background-color: #000;
    border: 10px solid #000;
    z-index: -2;
}

.template-border:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: #FFF;
    z-index: -1;
}

Answer 4

根据Leo Wu的想法，这是我的解决方案：

＆＃13;

＆＃13;

.my-div
{
  background-color: white;
  border: solid 20px black;
  border-radius: 10px;
  box-shadow: 0 0 10px black;
  height: 100px;
  left: 30px;
  position: relative;
  top: 20px;
  width: 200px;
}
.my-div:before
{
  background-color: white;
  border-radius: 5px;
  content: "";
  display: block;
  height: calc(100% + 20px);
  left: -10px;
  position: absolute;
  top: -10px;
  width: calc(100% + 20px);
  z-index: 1;
}
.some-content
{
  height: calc(100% + 20px);
  left: -10px;
  position: relative;
  top: -10px;
  width: calc(100% + 20px);
  z-index: 3;
}
.some-header
{
  background-color: green;
  border-radius: 5px 5px 0 0;
  height: 30px;
}

＆＃13;

<html>
	<body>
		<div class="my-div">
			<div class="some-content">
				<div class="some-header">my title</div>
				<div>some other content</div>
			</div>
		</div>
	</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你需要有两个div元素，一个在另一个内部，并使用跨浏览器圆角css，如下所示：

.small-rounded {
    border: 1px solid ##000;
    -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
    border-radius: 5px;
}

Answer 6

问题不在于CSS的编码，而在于圆的数学。 基本上你的border-inner-radius（我知道这个属性不存在）等于border-radius - border-width。

很简单地计算出你想要的内半径，然后加上边框的宽度以达到预期的效果。

border-inner-radius + border-width = border-radius

Answer 7

最好，最快的方法就是这样做

.curve {
  width : 300px;
  height: 100px;
  border: 4px solid black;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
} 

<div class='curve'></div>

Answer 8

在开始查看曲线之前，需要将border-radius设置为大于border-width的值。设置边界半径+ 1px大于border-width不是设置公式。但是，它肯定会是一个积极的价值。您需要在不同的浏览器中进行实验，直到您看到可能在大多数浏览器中运行良好的最小边界半径值。 （有些浏览器可能不支持此功能。）例如，在Google Chrome中，我将边框宽度设置为10px，但在开始看到内边框曲线的外观之前，必须将border-radius设置为13px，而15px工作得更好。

Answer 9

以防万一有人正在谷歌搜索此答案并发送到这里，这是执行此操作的简单方法...

示例HTML ...

<div class="wrapper">
    <div class="content">
        your content goes here
    </div>
</div>

示例CSS ...

.wrapper {
    border-radius: 25px;
    border: solid 25px blue;
    background-color: blue;
}
.content {
    border-radius: 10px;
    background-color: white;
}

... Presto。

Answer 10

另一个想法是考虑多个radial-gradient来模拟内半径，并且您可以根据需要控制外半径和内半径，而无需任何额外的元素：

.box {
  width:150px;
  height:150px;
  margin:10px;
  border:10px solid red;
  border-radius:10px; /* Outer Radius*/
  background:
   radial-gradient(farthest-side at bottom right,transparent 98%,red 100%) top left,
   radial-gradient(farthest-side at top    right,transparent 98%,red 100%) bottom left,
   radial-gradient(farthest-side at bottom left ,transparent 98%,red 100%) top right,
   radial-gradient(farthest-side at top    left ,transparent 98%,red 100%) bottom right,
   blue;
  background-size:25px 25px; /* inner Radius*/
  background-repeat:no-repeat;
  background-origin:padding-box;
}

<div class="box">

</div>

您还可以为每边设置不同的值：

.box {
  width:150px;
  height:150px;
  margin:10px;
  border:10px solid red;
  border-radius:10px; /* Outer Radius*/
  background:
   radial-gradient(farthest-side at bottom right,transparent 98%,red 100%) top left / 30px 30px,
   radial-gradient(farthest-side at top    right,transparent 98%,red 100%) bottom left / 20px 20px,
   radial-gradient(farthest-side at bottom left ,transparent 98%,red 100%) top right / 50px 50px,
   radial-gradient(farthest-side at top    left ,transparent 98%,red 100%) bottom right/ 10px 10px,
   blue;
  background-repeat:no-repeat;
  background-origin:padding-box;
}

<div class="box">

</div>

Answer 11

今天我遇到了这个“问题”。我的解决方案使用了两个 div，并在外层 div 上重叠了内部 div。

我的解决方案的一个好处是它不会改变背景颜色（可以是透明的）。

您可以通过修改 outer-border 类和使用 inner-border 类修改内边界来控制外边界半径。

.outer-border {
  border: 10px solid #20b2aa;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  min-height: 100px;
}

.inner-border, .inner-border-evidence {
  flex: 1;
  border: 10px solid #20b2aa;
  border-radius: 30px;
  margin: -9px;
}

.inner-border-evidence {
  border-color: #0a3b8a;
}

<div class="outer-border">
  <div class="inner-border">
  </div>
</div>
<br />
<p>Here you can see how the inner div overlaps the outer div.</p>
<div class="outer-border">
  <div class="inner-border-evidence">
  </div>
</div>