CSS/XHTML边框样式的写法总结

今天在群（CSS森林:30247792）里讨论了border的样式写法，发现border的写法还真是灵活，做了一下总结，希望对大家有用：

border : border-width || border-style || border-color

border是一个复合的属性，它可以同时定义上右下左四个边框，当四个边都是同个样式时可以使用，如：

border:1px solid #FF00FF

 

这是最简单的应用，如果四个边的样式不是相同的怎办？一般会有下面几种情况，写法差不多：

/*边框样式、宽度、颜色都不同*/
.div1{
        border-top:1px solid #FF00FF;
        border-right:2px solid #0000FF;
        border-bottom:1px double #FF00FF;
        border-left:1px solid #FF0000;
}
.div2{
         border-width:1px 2px 1px 1px;
         border-style:solid solid double solid;
         border-color:#FF00FF #0000FF #FF00FF #FF0000;
}


/*边框样式不同*/
.div1{
         border-top:1px solid #FF00FF;
         border-right:1px solid #FF00FF;
         border-bottom:1px double #FF00FF;
         border-left:1px solid #FF00FF;
}
.div2{
         border:1px #FF00FF;
         border-style:solid solid double solid;
}


/*边框宽度不同*/
.div1{
        border-top:1px solid #FF00FF;
        border-right:2px solid #FF00FF;
        border-bottom:1px solid #FF00FF;
        border-left:1px solid #FF00FF;
}
.div2{
        border:solid #FF00FF;
        border-width:1px 2px 1px 1px;
}


/*边框颜色不同*/
.div1{
        border-top:1px solid #FF00FF;
        border-right:1px solid #0000FF;
        border-bottom:1px solid #FF00FF;
        border-left:1px solid #FF0000;
}
.div2{
        border:1px solid;
        border-color:#FF00FF #0000FF #FF00FF #FF0000;
}

 

还有就是有些边框是没有的，比如只有底边：

.div1{
/*错误的*/
        border:none;
        border-bottom:1px solid #FF00FF;
}
.div2{
/*正确的*/
        border:1px #FF00FF;
        border-style:none none solid;
}

 

注意：如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

 

• 如果只提供一个，将用于全部的四条边。
• 如果提供两个，第一个用于上－下，第二个用于左－右。
• 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

原文地址：http://www.cssforest.org/blog/index.php?id=52