CSS层叠样式表边框
如何只在文本的左边和右边设置边框？
在用户指定的边上设置边框？
如何在不同的边上设置不同的边框？
解释
属性
:
Side Borders使用以下的标记可对每个边框单独设置。方法:
border-top: <border-top-width> || <border-style> || <border-color> ; border-left: <border-left-width> || <border-style> || <border-color> ; border-bottom: <border-bottom-width>|| <border-style> || <border-color> ; border-right: <border-right-width> || <border-style> || <border-color> ; 定义:
使用这些标记可对每个边框单独设置。边框属性可以取以下的值。
a)border-top:5px dotted red-顶边框可以使用标记border-top来设置。属性值的次序是：顶边框宽度、样式、颜色。
b)border-left:5pt dashed green-左边框可以使用标记border-left来设置。属性值的次序是：左边框宽度、样式、颜色。
c)border-bottom:2% groove grey-底边框可以使用标记border-bottom来设置。属性值的次序是：底边框宽度、样式、颜色。
d)border-right:5px solid blue-右边框可以使用标记border-right来设置。属性值的次序是：右边框宽度、样式、颜色。
示例1: <div style="
border-top : 2px dotted red ;"> 测试边界性能 </div>
结果: 测试边界性能
<div style="
border-left : 2pt dashed green; "> 测试边界性能 </div>
结果: 测试边界性能
<div style="
border-bottom: 5px ridge brown;"> 测试边界性能 </div>
结果: 测试边界性能
<div style="
border-right: 5px groove #733366;"> 测试边界性能 </div>
结果: 测试边界性能
把以上的组合:
示例5: <div style="
border-top : 2px dotted red ;
border-left : 2pt dashed rgb(100,100,100);
border-bottom: 5px ridge brown;
border-right: 5px groove #733366;
">
测试边界性能 </div>
结果: 测试边界性能
注意:在这个示例中我们使用div标记。但是你可以使用任何标准的html标记来设置样式。