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