这个属性用来设定上下左右边框的风格,它的值如下:
none (没有边框,无论边框宽度设为多大)
dotted (点线式边框)
dashed (虚线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>边框风格属性 border-style </title> <style type="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 class="d1">这个div的CSS边框风格(border-style)属性是none。</div> <br/> <div class="d2">这个div的CSS边框风格(border-style)属性是solid。</div> <br/> <div class="d3">这个div的CSS边框风格(border-style)属性是dotted。</div> <br/> <div class="d4">这个div的CSS边框风格(border-style)属性是dashed。</div> <br/> <div class="d5">这个div的CSS边框风格(border-style)属性是double。</div> <br/> <div class="d6">这个div的CSS边框风格(border-style)属性是groove。</div> <br/> <div class="d7">这个div的CSS边框风格(border-style)属性是ridge。</div> <br/> <div class="d8">这个div的CSS边框风格(border-style)属性是inset。</div> <br/> <div class="d9">这个div的CSS边框风格(border-style)属性是outset。</div> <br/> </body> </html>
medium (是缺省值)
thin (比medium细)
thick (比medium粗)
用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>边框宽度 border-width</title> <style type="text/css"> .d1{border-style:solid;} .d2{border-width:thin;border-style:solid;} .d3{border-width:thick;border-style:solid;} .d4{border-width:10px;border-style:solid;} .d5{border-width:5mm;border-style:solid;} </style> </head> <body> <div class="d1">这个div的CSS边框宽度(border-width)属性缺省值是medium。</div> <br> <div class="d2">这个div的CSS边框宽度(border-width)属性值是thin。</div> <br> <div class="d3">这个div的CSS边框宽度(border-width)属性值是thick。</div> <br> <div class="d4">这个div的CSS边框宽度(border-width)属性值是10px。</div> <br> <div class="d5">这个div的CSS边框宽度(border-width)属性值是5mm。</div><br> </body> </html>
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>边框颜色 border-color</title> <style type="text/css"> .d1{border-color:gray;border-style:solid;} </style> </head> <body> <div class="d1">这个div的CSS边框宽度(border-width)属性缺省值是medium。</div> <br> </body> </html>
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>边框属性 border</title> <style type="text/css"> .d1{border:5px solid gray;} </style> </head> <body> <div class="d1"> 这个div的边框属性:边框宽度(border-width)为5px;边框风格(border-style)为直线式;边框颜色为灰色。 </div> </body> </html>
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>单个边框属性 </title> <style type="text/css"> .d1{border-top:5px solid #FF0000} .d2{border-bottom:5px solid #FF0000} .d3{border-left:5px solid #FF0000} .d4{border-right:5px solid #FF0000} </style> </head> <body> <div>单个边框属性:</div> <div class="d1">设置上边框用border-top</div> <div class="d2">设置下边框用border-bottom</div> <div class="d3">设置左边框用border-left</div> <div class="d4">设置右边框用border-right</div> </body> </html>