属性: 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>
结果:
测试边界性能
示例2:
<div style=" border-left : 2pt dashed green; ">
测试边界性能 </div>
结果:
测试边界性能
示例3:
<div style=" border-bottom: 5px ridge brown;">
测试边界性能 </div>
结果:
测试边界性能
示例4:
<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标记来设置样式。
|