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

本文介绍了如何使一个框的内部和边框的圆角？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我想标题很难理解，所以我会解释。 我试图实现这种效果： （有圆角和边框的框，其边框也有圆角）。 我已经设法通过使用 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）的值必须为： 适用于我的代码 在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!EDITThe 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 calculationsFirst, 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 widthWhenever 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 = 1pxYour 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 meTested 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 BordersAre 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> 这篇关于如何使一个框的内部和边框的圆角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！