css - 如何在盒子内部及其边框制作圆 Angular ？

Question

我觉得标题有点难懂，我来解释一下。我正在努力实现这种效果:

(一个有圆 Angular 的盒子，它的边框也有圆 Angular )。

我已经设法通过使用 background-clip 属性做到了这一点:

(边框为圆 Angular 但内框不是)

问题是，如何实现内框的圆 Angular ？

谢谢!

编辑

我正在使用的 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 ，内边界半径为负，你会得到一些尴尬的倒 Angular 。目前，我不认为有调整 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 (6px) 值来自 border-width值 (5px) 以获得所需的内边界半径:

---

适合我的代码

在 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为您的边界属性(property)？如果是这样，您需要申请 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 方面，你可以声明一个 .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>