css属性之边框属性

来源：互联网发布：c 不定长度数组编辑：程序博客网时间：2024/05/21 06:16

本篇小结css属性的边框属性的一些使用方法。

<html><head><title>CSS常见属性(边框属性)</title><meta charset="utf-8"><style type="text/css">div{width:50px;height:50px;float:left;margin-right:10px;background-color:#f61;border-width:10px;border-color:green blue yellow black; /*green blue yellow black代表边框四个方向的颜色*/}.div0{border-style:solid;border-width:5px;  /*border-width边框宽度*/}.div1{border-top-style:solid;  /*solid直线边框*/}.div2{border-bottom-style:dashed; /*dashed虚线边框*/}.div3{border-left-style:dotted;  /*dotted点状边框*/}.div4{border-left-style:dotted;border-right-style:double;  /*double双线边框*/}.div5,.div6,.div7,.div8{width:85px;height:45px;/*border-width:20px;background:none;border-color:#ddd;*/border:solid 2px black;/*简写的方式*/}.div5{border-style:groove; /*groove是凸槽边框*/}.div6{border-style:ridge;  /*ridge是垄状边框*/}.div7{border-style:inset;  /*inset是inset边框*/}.div8{border-style:outset;}</style></head><body><div class="div0">div0</div><div class="div1">solid</div><div class="div2">dashed</div><div class="div3">dotted</div><div class="div4">double</div><div class="div5">凸槽边框</div><div class="div6">垄状边框</div><div class="div7">inset</div><div class="div8">outset</div></body></html>

0 0