CSS魔法堂：重拾Border之——不仅仅是圆角

头像
肥仔John
    阅读 9 分钟
    2

    前言

     当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比例分配元素宽度时，不禁会问"我真的懂border吗？"。本系列将稍微深入探讨一下那个貌似没什么好玩的border！
    《CSS魔法堂：重拾Border之——解构Border》
    《CSS魔法堂：重拾Border之——图片作边框》
    《CSS魔法堂：重拾Border之——不仅仅是圆角》
    《CSS魔法堂：重拾Border之——更广阔的遐想》

    圆角进化论

     当设计稿上出现圆角按钮/标签页时，我们会如何应对呢？CSS3到来之前最广为人知的应该就是"滑动门"(sliding door)实现方式了。

    滑动门实现法

    <style type="text/css">
ul{padding:0;margin:0;}
li{padding:0;margin:0;list-style:none;}
a{margin:0;text-decoration:none;}

/*clearfix*/
.nav{
  *zoom: 1;
}
.nav::after{
  content: ".";
  display: block;
  clear: both;
  line-height: 0;
  visibility: hidden;
}
/*滑动门实现Tab*/
.nav .nav-item{
  float: left;
  margin-right: 5px;
}
.nav .nav-item a{
  display: inline-block;
  background: url("./background.jpg") no-repeat;
  color:#333;
  font-size: 12px;
  line-height: 2;
}
.nav .nav-item a span{
  display: inline-block;
  background: url("./background.jpg") no-repeat right top;
  padding: 0 10px 0 5px;
  margin-left: 5px;
}

.nav .nav-item a:hover{
  background: url("./background.jpg") no-repeat left -30px;
}
.nav .nav-item a:hover span{
  background: url("./background.jpg") no-repeat right -30px;
}
</style>
<ul class="nav">
  <li class="nav-item"><a href="javascript:void 0"><span>首页</span></a></li>
  <li class="nav-item"><a href="javascript:void 0"><span>PDCA检验单查询</span></a></li>
  <li class="nav-item"><a href="javascript:void 0"><span>成品通用标准审核</span></a></li>
</ul>

    border-radius实现法

    border-top-left-radius: [<length>|<percentage>]{1,2}
    border-top-right-radius: [<length>|<percentage>]{1,2}
    border-bottom-left-radius: [<length>|<percentage>]{1,2}
    border-bottom-right-radius: [<length>|<percentage>]{1,2}
    设置左上/右上/左下/右下角水平和垂直椭圆半径
    <length>:以带单位的绝对值作为半径;
    <percentage>:以对应border box的尺寸(不是border-width)为参考系，设置半径;
    注意：结果值为0(默认值)时，为直角边框
    border-radius: [<length>|<percentage>]{1,4} [/[<length>|<percentage>]{1,4}]?:一次过设置4个角的椭圆半径

     从上图我们可以看到4个角分别对应4个独立的椭圆形，而圆角正是4分之1个椭圆。
    撸代码！

    <style type="text/css">
/*clearfix*/
.nav3{
  *zoom: 1;
}
.nav3::after{
  content: ".";
  display: block;
  clear: both;
  line-height: 0;
  visibility: hidden;
}
/*border-radius实现Tab*/
.nav3 .nav-item3{
  float: left;
  margin-right: 5px;
}
.nav3 .nav-item3 a{
  font-size: 12px;
  line-height: 2;

  display: inline-block;
  background: #0ac;
  padding: 0 10px;
  border: 1px solid #eee;
  border-radius: 8px 8px 0 0;
}
.nav3 .nav-item3 a:hover{
  background: #eef;
}
</style>
<ul class="nav3">
  <li class="nav-item3"><a href="javascript:void 0">首页</a></li>
  <li class="nav-item3"><a href="javascript:void 0">PDCA检验单查询</a></li>
  <li class="nav-item3"><a href="javascript:void 0">成品通用标准审核</a></li>
</ul>

    圆角的何止是border box啊


     上图的content box变成椭圆形了，而且content box中的文字好像飘到content box外面。但确实是content box变为椭圆形还是说仅仅是背景色是如此而已呢？让我们添加overflow:hidden看看效果吧

     看来border-radius确实影响到content box了。其实border-radius将会影响到box model中的所有box。当我们通过border-radius设置border box的椭圆半径后，CSS渲染引擎会根据公式自动计算出margin/padding/content box的椭圆半径，然后为它们渲染出圆角。
    注意

    1. margin/border/padding/content box中相同方向的角的椭圆的圆心重叠;

    2. 当椭圆半径为0时，渲染为直角。

    margin box圆角了

    公式：margin-radius = border-radius + margin-width
    当border-radius > margin-width时，margin-width=1 + (margin-width/border-radius-1)^3以确保margin-radius趋向于直角。

    padding box圆角了

    公式：padding-radius = border-radius + border-width
    当padding-radius为0时，渲染为直角

    <style type="text/css">
.s1{
background: #FEE;
width: 0;
padding: 50px;
border: 10px solid red;
border-radius: 10px;

float:left;
margin-right: 20px;
}
.s2{
background: #FEE;
width: 0;
padding: 50px;
border: 10px solid red;
border-radius: 20px;

float:left;
}
</style>
<div class="s1"></div>
<div class="s2"></div>

    content box/area圆角了

    公式：content-radius = border-radius + border-width - padding-width
    当content-radius为0时，渲染为直角

    <style type="text/css">
.s1{
background: #FEE;
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 10px;

float:left;
margin-right: 20px;
}
.s2{
background: #FEE;
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 20px;

float:left;
}
</style>
<div class="s1"></div>
<div class="s2"></div>

    注意
    由于margin区域无法触发点击等事件，而圆角border box所占面积必定小于直角border box，因此为保持可点击区域面积，圆角border box应设置更大的高宽值。

    话说"大值特性"和"等比特性"

     @张鑫旭老师在《秋月何时了，CSS3 border-radius知多少？》提到"大值特性"和"等比特性"两个特性。

    <style type="text/css">
.s1{
box-sizing: border-box;
background: #FEE;
width: 100px;
height: 200px;
border: 10px solid red;
border-top-left-radius: 100px 200px;

float: left;
margin-right: 20px;
}
.s2{
box-sizing: border-box;
background: #FEE;
width: 100px;
height: 200px;
border: 10px solid red;
border-top-left-radius: 200px;

float: left;
}
</style>
<div class="s1"></div>
<div class="s2"></div>

    你看div.s2明明把左上角的水平和垂直半径设置为200px，但实际效果却是两者结果值均为100px，难道这就是"大值特性"？

    <style type="text/css">
.s1{
box-sizing: border-box;
background: #FEE;
width: 200px;
height: 100px;
border: 10px solid red;
border-top-left-radius: 300px 100px;
border-top-right-radius: 900px 100px;
}
</style>
<div class="s1"></div>

    仅仅看div.s1水平方向的椭圆半径，left和right相加300+900=1200远远大于border box的宽度200px，也就是说两个椭圆将发生重叠。对于这种情况CSS渲染引擎到底是如何处理的呢？

    1. 首先明确的是left+right必须小于等于border-box的宽度，也就是说两个椭圆不能发生重叠。

    2. 然后根据"等比例特性"得到left/(left+right)=300/(300+900)=1/4，right/(left+right)=900/(300+900)=3/4，得到left结果值为200/4=50，right结果值为3*200/4=150。

     通过"等比例特性"我们很好地解释了上图中水平方向的效果，但大家有没有发现垂直方向的半径有点奇怪呢？我们明明设置半径为100px，而且border box的高度恰好也是100px，按理应该是足够的，为何垂直半径的结果值不是100px呢？
     其实W3C Spec中已经说得很清楚了！

    Let f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si is the sum of the two corresponding radii of the corners on side i, and Ltop = Lbottom = the width of the box, and Lleft = Lright = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f.

    其实"最大值特性"和"等比例特性"只是上述规则的表象而已，最根本的公式为f=min(Li/Si)
    以第二个示例来计算一下吧
    计算f的值

    1. top-left和top-right的水平半径之和为1200px，而border box宽度为200px，那么f1=200/1200=1/6;

    2. top-left和bottom-left的垂直半径之和为400px，而border box高度为400px，那么f2=400/400=1;

    3. bottom-left和bottom-right的水平半径为0，忽略;

    4. top-right和bottom-right的垂直半径之和为400px，而border box高度为400px，那么f3=400/400=1;

    5. f=min(f1,f2,f3)，结果为f=f1

    缩放各半径

    1. top-left和top-right的水平半径分别乘以f，得到结果值300/6=50，900/6=150;

    2. top-left和top-right的垂直半径分别乘以f，得到结果值400/6=66.66。

    被忽视的猪脚——相交线

     当设置border-left和border-top后，我们很容易预测到左边框和上边框的样式，但它俩相交部分的样式呢？这里就涉及到相交线的问题了！

    通过直角边框找相交线

     圆角边框是基于直角边框的，这一点也体现在相邻边框的相交线上。

    <style type="text/css">
  .box{
    width: 100px;
    height: 200px;
    border: 50px solid;
    border-left-color: red;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: yellow;
  }
</style>
<div class="box"></div>


     我们可以看到两边相交所形成的矩形的对角线，将作为边的相交点。通过相交点判断边框样式应应用到哪一条边上。
    透视图如下

    延长相交线

     由于圆角边框不像直角边框那样有棱有角，因此更难以分辨边框样式所对应的边框。但只要我们沿直角边框的相交线向图形内延伸，一切则清晰明了了。

    <style type="text/css">
  .rounded-box{
    width: 100px;
    height: 200px;
    border: 50px solid;
    border-left-color: red;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: yellow;
    border-radius: 100px;
  }
</style>
<div class="rounded-box"></div>


    透视图如下

    兼容性


     虽然各大浏览器均支持border-radius属性，但其实现效果却不尽相同，我们拿极端情况来作试验，最能看出效果。结论是让我们大跌眼镜的：IE效果最为理想！！

    <style type="text/css">
.s1{
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  border: 50px solid;
  border-color: red blue green yellow;

  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}
</style>
<div class="s1"></div>

    chrome34中

    FF中

    IE9

    总结

     尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/5458573.htm^_^肥仔John

    感谢

    CSS Backgrounds and Borders Module Level 3 4. Borders
    秋月何时了，CSS3 border-radius知多少？
    CSS滑动门Sliding door详解
    《图解CSS3核心技术与案例实战》——第3章 CSS3边框

    css
    肥仔John
    2.8k 声望1.8k 粉丝

    《Petite-Vue源码剖析》作者

    « 上一篇
    CSS魔法堂：重拾Border之——图片作边框
    下一篇 »
    CSS魔法堂：重拾Border之——更广阔的遐想

    引用和评论

    推荐阅读
    头像
    React魔法堂：size-sensor源码略读

    肥仔John赞 1阅读 1.3k

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    CSS 如何模拟“真实的”进度条？

    XboxYan赞 8阅读 1.6k评论 2

    头像
    纯CSS实现有趣emoji切换开关

    南城FE阅读 4k

    头像
    那些年我用过的SAP IDE

    注销阅读 3k

    头像
    SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版

    注销阅读 1.4k

    0 条评论
    得票最新