css直角线_CSS魔法堂：重拾Border之——不仅仅是圆角

前言

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

《CSS魔法堂：重拾Border之——解构Border》

《CSS魔法堂：重拾Border之——图片作边框》

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

《CSS魔法堂：重拾Border之——更广阔的遐想》

圆角进化论

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

滑动门实现法

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;

}

• 首页
• PDCA检验单查询
• 成品通用标准审核

border-radius实现法

border-top-left-radius: [|