边框风格属性(border-style)
这个属性用来设定上下左右边框的风格,它的值如下:
none(没有边框,无论边框宽度设为多大)
dotted(点线式边框)
dashed(破折线式边框)
solid(直线式边框)
double(双线式边框)
groove(槽线式边框)
ridge(脊线式边框)
inset(内嵌效果的边框)
outset(突起效果的边框)
示例:分别使用none,dotted,dashed,solid,double,groove,ridge,inset,outset的CSS边框风格属性示例
<html>
<head>
<title>边框风格属性border-style</title>
<styletype="text/css">
.d1{border-style:none;}
.d2{border-style:solid;}
.d3{border-style:dotted;}
.d4{border-style:dashed;}
.d5{border-style:double;}
.d6{border-style:groove;}
.d7{border-style:ridge;}
.d8{border-style:inset;}
.d9{border-style:outset;}
</style>
</head>
<body>
<div>这个div的CSS边框风格(border-style)属性缺省值是none。</div>
<br>
<divclass="d1">这个div的CSS边框风格(border-style)属性是none。</div>
<br>
<divclass="d2">这个div的CSS边框风格(border-style)属性是solid。</div>
<br>
<divclass="d3">这个div的CSS边框风格(border-style)属性是dotted。</div>
<br>
<divclass="d4">这个div的CSS边框风格(border-style)属性是dashed。</div>
<br>
<divclass="d5">这个div的CSS边框风格(border-style)属性是double。</div>
<br>
<divclass="d6">这个div的CSS边框风格(border-style)属性是groove。</div>
<br>
<divclass="d7">这个div的CSS边框风格(border-style)属性是ridge。</div>
<br>
<divclass="d8">这个div的CSS边框风格(border-style)属性是inset。</div>
<br>
<divclass="d9">这个div的CSS边框风格(border-style)属性是outset。</div>
<br>
</body>
</html>
这个div的CSS边框风格(border-style)属性缺省值是none。
这个div的CSS边框风格(border-style)属性是none。
这个div的CSS边框风格(border-style)属性是solid。直线式边框
这个div的CSS边框风格(border-style)属性是dotted。点线式边框
这个div的CSS边框风格(border-style)属性是dashed。破折线式边框
这个div的CSS边框风格(border-style)属性是double。双线式边框
这个div的CSS边框风格(border-style)属性是groove。槽线式边框
这个div的CSS边框风格(border-style)属性是ridge。脊线式边框
这个div的CSS边框风格(border-style)属性是inset。内嵌效果
这个div的CSS边框风格(border-style)属性是outset。突起效果