如何使一个框的内部和边框的圆角？ [英] How to make round corners to both inside of a box and its border?

问题描述

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

（有圆角和边框的框，其边框也有圆角）。

我已经设法通过使用 background-clip 属性：

img src =https://i.stack.imgur.com/slXp5.pngalt =enter image description here>

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

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

谢谢！

EDIT

我使用：

 < header class =body template-bg template-border radius-all> 
< nav> 
< ul> 
< li>< a href =＃>链接1< / a>< / li> 
< li>< a href =＃>链接2< / a>< / li& 
< li>< a href =＃>链接3< / a>< / li> 
< li>< a href =＃>链接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）;} 
  

解决方案

内边界计算

您需要删除 -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 / p>

您的新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 value（5px）的值必须为：

< hr>

适用于我的代码

在Firefox 3.x，和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）; } / *请注意，白色白色不区分边框* / 
  

---

在JavaScript中添加颜色叠加层

 < script type =text / javascript > 
 var bodyBgColor = document.getElementsByTagName（'body'）[0] .style.backgroundColor ;; 
 
 //在这里为十六进制插入不透明度递减代码
 
 var header = document.getElementsByTagName（'header'）[0]; 
 header.style.backgroundColor = bodyBgColor; 
< / script> 
  

我不完全确定如何在JavaScript中进行十六进制算术，但我敢肯定，

$ b

b $ b

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

 < div id =border-boxstyle =border-radius：5px;> 
< div id =inner-boxstyle =border-radius：5px;> 
< / div> 
< / div> 
  

一个更高效的方法就是让内框管理自己的边框：

 < div id =inner-boxstyle =border：4px solid blue; border-radius：5px> 
<！ - 内容 - > 
< / div> CSS-wise，你可以只声明一个 .rounded-border    code>类，并将其应用于每个具有圆角边框的框：
  .rounded-borders {
 border-radius：5px; 
 -moz-border-radius：5px; 
 -webkit-border-radius：5px; 
 -khtml-border-radius：5px; 
} 
  
并将该类应用于任何具有圆角边框的框：
 < div id =border-boxclass =rounded-borders> 
< div id =inner-boxclass =rounded-borders> 
< / div> 
< / div> 
  
对于单个框元素，您仍然需要声明边框大小显示：
 < style type =text / css> 
＃inner-box {border：4px solid blue; } 
< / style> 
 
< div id =inner-boxclass =rounded-borders> 
< / div> 
  
 
I guess the title is kind of hard to understand, so I'll explain.
I am trying to achieve this effect:



(a box which has rounded corners and its border, which also has rounded borders).

I've managed to do this, by using the background-clip property:



(rounded corners for border but not for inner box)

The question is, how can I achieve rounded corners for the inner box?

Thank you!

EDIT

The HTML I am using:
<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>
And the 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);}

解决方案
Inner border calculations

First, you'll need to remove -vendor-background-clip: padding-box or set them to border-box the default in order to achieve the inner border radius.

The inner border radius is calculated as the difference of the outer border radius (border-radius) and the border width (border-width) such that 

inner border radius = outer border radius - border width

Whenever the border-width is greater than the border-radius, the inner border radius is negative and you get some awkward inverted corners. Currently, I don't believe there is a property for adjusting the inner-border-radius, so you'll need to calculate it manually.

In your case:

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

Your new CSS should be:
.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); }
Simply subtract the border-radius (6px) values from the border-width value (5px) in order to achieve your desired inner-border-radius: 



Code that works for me

Tested on Firefox 3.x, Google Chrome, and 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 */




Adding color overlays in 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>
I'm not entirely sure how to do hexadecimal arithmetic in JavaScript but I'm sure you can find an algorithm in Google.



Applying General Borders

Are you using a separate box <div> for your border through its background property? If so, you'll need to apply border-radius and its vendor specific properties on both the border box and the inner box:
<div id="border-box" style="border-radius: 5px;">
    <div id="inner-box" style="border-radius: 5px;">
    </div>
</div>
A much more efficient way would simply have the inner-box manage its own border:
<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
    <!-- Content -->
</div>
CSS-wise, you could just declare a .rounded-border class and apply it to every box that will have rounded borders:
.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}
And apply the class to any boxes that will have rounded borders:
<div id="border-box" class="rounded-borders">
    <div id="inner-box" class="rounded-borders">
    </div>
</div>
For a single box element, you'll still be required to declare the border size in order to be shown:
<style type="text/css">
    #inner-box { border: 4px solid blue; }
</style>

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


                        
这篇关于如何使一个框的内部和边框的圆角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！