CSS——边框设置

傷城~ 2023-08-17 16:10 60阅读 0赞

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>CSS</title>
            <style type="text/css">
            .class1{
         
            border-style: dotted;    
            height: 20px;
            }
            .class2{
         
            border-style:dashed dotted;
            height: 20px;    
            }
            .class3{
         
            border-style: dashed dotted double;     
            height: 20px;
            }
            .class4{
         
            border-style: dashed  dotted double groove; 
            height: 20px;
            }
            </style>
        </head>
    
        <body bgcolor="aquamarine">
        <p class=class1></p>
        <p class=class2></p>
        <p class=class3></p>
        <p class=class4></p>
        </body>
    
    </html>

对边框的设置有综合属性：border-style，亦可运用其他四个属性分别对边框的边进行设置。

![1392562-20190826202013174-1802067245.png][]

边框宽度设置：

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>CSS</title>
            <style type="text/css">
            .class1{
         
            border-style: dotted;    
            border-width: 2px;
            height: 20px;
            }
            .class2{
         
            border-style:dashed dotted;
            border-width: 2px 4px;
            height: 20px;    
            }
            .class3{
         
            border-style: dashed dotted double; 
            border-width: 2px 4px 6px;    
            height: 20px;
            }
            .class4{
         
            border-style: dashed  dotted double groove; 
            border-width: 2px 4px 6px 8px;
            height: 20px;
            }
            </style>
        </head>
    
        <body bgcolor="aquamarine">
        <p class=class1></p>
        <p class=class2></p>
        <p class=class3></p>
        <p class=class4></p>
        </body>
    
    </html>

![1392562-20190826202347563-322872083.png][]

转载于:https://www.cnblogs.com/zhai1997/p/11414689.html

[1392562-20190826202013174-1802067245.png]: /images/20230810/81f60ad8004b490db0f43a3f2a3155ee.png
[1392562-20190826202347563-322872083.png]: /images/20230810/a5a070a21317410db669bc17c8910045.png