天下维客，你可以修改的网络知识库
CSS有着丰富的边框控制效果，常见的有单线框、虚线框、双线框、宽边框，以及一定的立体效果。
本文列出各种不同的边框效果，以便读者选择以及在不同浏览器中进行效果比对。
单线边框效果
- solid实线边框
- border:1px solid #808080
所有浏览器中效果相同，推荐
|
- dotted边框
- border:1px dotted #808080
FF1.5显示为实线，IE6/Opera8显示为密虚线
|
- dashed边框
- border:1px dashed #808080
所有浏览器效果相同，推荐
IE下有时会因边框过长出现视觉暂留而变为纯色或无边框，此时拖拽滚动条可复原，是IE的一个BUG。
|
双线边框效果
双线边框的宽度最小为3px，否则不能展示双线效果。
在IE6里，两条边线之间不填充颜色；而在FF1.5、Opera9中，div底色将填充这些地方（由div的background-color参数指定）
- double双线边框
- border:2px double #808080
边框宽度过小，退化为实线边框
|
- double双线边框
- border:3px double #808080
常用双线边框之一，推荐
|
- double双线边框
- border:5px double #808080
|
- double双线边框
- border:9px double #808080
过宽的边框显得重拙
|
宽边实线框效果
宽边有着视觉强化作用，但同一页面之中不宜设置过多的边框规格，以免凌乱。
|
|
|
|
- border:10px solid #808080
|
立体边框效果
在CSS中有几种立体边框控制效果，但其过渡效果较为生硬。除ridge效果外不推荐使用。
3点、5点宽度的ridge效果在FF1.5、Opera9中有明显边框突起感，IE6中效果稍差。
另外特别提醒一下，这些立体效果在不同浏览器中的表现有差异，请自行使用不同浏览器来观察。
2点宽度
|
|
- border:2px groove #808080
|
|
- border:2px outset #808080
|
|
3点宽度
|
|
- border:3px groove #808080
|
|
- border:3px outset #808080
|
|
5点宽度
|
|
- border:5px groove #808080
|
|
- border:5px outset #808080
|
|
10点宽度
- border:10px solid #808080
|
- border:10px groove #808080
|
- border:10px ridge #808080
|
- border:10px outset #808080
|
- border:10px inset #808080
|
hidden、none效果
hidden参数和none参数表现相同，都是不显示边框。下图为对比效果：
- border:10px hidden #808080
|
- border:10px solid #808080
|
|
