css – 如何使一个框的内部和边框的圆角？

我想标题很难理解，所以我会解释。
我试图实现这个效果：

(具有圆角和其边界的盒，其具有圆形边界)。

我设法做到这一点，通过使用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,0.2);}

解决方法

内边界计算

首先，您需要删除-vendor-background-clip：padding-Box或将它们设置为border-Box默认值，以实现内边界半径。

内边界半径被计算为外边界半径(border-radius)和边界宽度(border-width)的差，使得

内边界半径=外边界半径 – 边框宽度

每当border-width大于border-radius时，内边界半径为负，你会得到一些尴尬的倒角。目前，我不相信有一个属性调整内边界半径，所以你需要手动计算。

在你的情况下：

内边界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,0.2); }

只需从边框宽度值(5px)中减去border-radius(6px)值，以实现所需的inner-border-radius：

适用于我的代码

在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.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>为您的边界通过其背景属性？如果是，您需要在边框和内框上应用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>

css – 如何使一个框的内部和边框的圆角？

解决方法

猜你在找的CSS相关文章