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

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从border-width值(5px)中减去(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使用属性<spread-radius>值"伪造"边框box-shadow.这会产生一个坚实的阴影,可以很容易地通过常规边框.

例如,要实现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

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

通过使用:after和生成内部div ,我设法想出一种方法来保持它在CSS中content: "".所以对于你的情况,它将是:

.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

此页面上的大多数解决方案都来自网络石器时代（2013 年之前 - 即甚至 IE11 之前）。

从 IE11 开始，执行此操作的方法很简单......

以防万一有人在 2013 年之后（今天快到 2020 年了）在 Google 上搜索这个答案并被发送到这里，这里是最简单、兼容且容易的方法来做到这一点，即使您需要支持 IE11...

（随意更改 px 值以获得您想要的外观，或者更好的是，使用变量并使用 Stylus 或 SASS 进行转译）

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

...急速。