CSS 边框样式

CSS边框样式

可以使用border-style来设置边框的样式,也可以分别来设置上下左右的样式:

border-top-style

border-left-style

border-right-style

border-bottom-style

边框样式有很多种,可以定义很多,比如单边框,虚线的边框,实线的边框,双边框,还有没有边框的边框。

<html>
    <head>
        <title>测试内边距</title>
        <meta charset="utf-8">
        <!-- 调用CSS样式表 -->
        <style type="text/css">
            p.none{border-style: none;}/*设置无边的边框*/
            p.dotted {border-style: dotted}/*设置点状边框*/
            p.dashed {border-style: dashed}/*设置虚线边框*/
            p.solid {border-style: solid}/*设置实线边框*/
            p.double {border-style: double}/*设置双线边框*/    
            p.groove {border-style: groove}/*设置3D凹槽边框*/        
            p.ridge {border-style: ridge}/*设置3D垄状边框*/
            p.inset {border-style: inset}/*设置3D inset 边框*/
            p.outset {border-style: outset}/*设置3D outset 边框*/
        </style>
    </head>
    <body>
        <p class="none">我没有边框</p>
        <p class="dotted">点状边框</p>
        <p class="dashed">虚线边框</p>
        <p class="solid">实线边框</p>
        <p class="double">双线边框</p>
        <p class="groove">3D凹槽边框</p>
        <p class="ridge">3D 垄状边框</p>
        <p class="inset">3D inset 边框</p>
        <p class="outset"> 3D outset 边框</p>
    </body>
</html>

CSS边框宽度与颜色

边框宽度

边框宽度是通过border-width来定义的,可以分别设置上下左右4个属性

border-top-width

border-bottom-width

border-left-width

border-right-width

边框颜色

边框宽度是通过border-color来定义的,同样也可以分别设置上下左右4个属性

border-top-color

border-bottom-color

border-left-color

border-right-color

<!DOCTYPE html>
<html>
    <head>
        <title>测试内边距</title>
        <meta charset="utf-8">
        <!-- 调用CSS样式表 -->
        <style type="text/css">
            /*定义p标签,是实线边框*/
            p {border-style: solid;}
            .all {
                /*定义所有边框宽度为5像素*/
                border-width: 5px; 
                /*定义所有边框是颜色为橙色*/
                border-color: #FF8000
            }
            .top {
                /*定义上边框宽度为5像素*/
                border-top-width: 5px; 
                /*定义上边框是颜色为橙色*/
                border-top-color: #FF8000
            }
            .bottom {
                /*定义下边框宽度为5像素*/
                border-bottom-width: 5px; 
                /*定义下边框是颜色为橙色*/
                border-bottom-color: #FF8000
            }
            .left {
                /*定义左边框宽度为5像素*/
                border-left-width: 5px; 
                /*定义左边框是颜色为橙色*/
                border-left-color: #FF8000
            }
            .right {
                /*定义右边框宽度为5像素*/
                border-right-width: 5px; 
                /*定义右边框是颜色为橙色*/
                border-right-color: #FF8000
            }
        </style>
    </head>
    <body>
        <p class="all">我是设置所有边框的</p>
        <p class="top">我只负责上面</p>
        <p class="bottom">我负责下面</p>
        <p class="left">我设置的是左边</p>
        <p class="right">我设置的是右边</p>
    </body>
</html>

单独设置各边框

在CSS中,可以指定不同的侧面不同的边框:

实例

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}


上面的例子也可以设置一个单一属性:

border-style:dotted solid;


border-style属性可以有1-4个值:

border-style:dotted solid double dashed;

上边框是 dotted

右边框是 solid

底边框是 double

左边框是 dashed

border-style:dotted solid double;

上边框是 dotted

左、右边框是 solid

底边框是 double

border-style:dotted solid;

上、底边框是 dotted

右、左边框是 solid

border-style:dotted;

四面边框是 dotted


边框也拥有简写属性

border: 5px solid red;

Weiter lernen
||
<!DOCTYPE html> <html> <head> <title>测试内边距</title> <meta charset="utf-8"> <!-- 调用CSS样式表 --> <style> .blue { border:1px dotted LightSkyBlue; } .red { border:5px solid red; } </style> </head> <body> <div> 默认无边框div </div><br/> <div class="blue"> 点状蓝色细边框 </div><br/> <div class="red"> 红色粗边框 </div><br/> </body> </html>
einreichenCode zurücksetzen
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!