当前位置 主页 > 关于我们 > 站长日志 >

    border-style,div的border-style边框风格属性

    栏目:站长日志 时间:2021-03-09 14:03

         边框风格属性(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>
    <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>这个div的CSS边框风格(border-style)属性缺省值是none。</div>
    <br>
    <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>
         这个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。 突起效果
         原文链接:https://blog.csdn.net/huzi111/article/details/6555984