深山老林

2006-11-15[原]边框样式的写法总结

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

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

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

=================CSS=================
border:1px solid #FF00FF。
=====================================

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

===============CSS===================
/*边框样式、宽度、颜色都不同*/
.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-width:1px 2px 1px 1px;
  border:solid #FF00FF;
}

/*边框颜色不同*/
.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;
}
=====================================

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

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

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