亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

gaya sempadan CSS

Gaya sempadan CSS

Anda boleh menggunakan gaya sempadan untuk menetapkan gaya sempadan, atau anda boleh menetapkan gaya atas, bawah, kiri dan kanan secara berasingan:

sempadan- gaya atas

sempadan-gaya-kiri

sempadan-kanan-gaya

border -bottom-style

Terdapat pelbagai jenis gaya sempadan, yang boleh ditakrifkan, seperti sempadan tunggal, sempadan bertitik, sempadan pepejal, sempadan dua dan sempadan tanpa sempadan . 

<html>
    <head>
        <title>測試內(nèi)邊距</title>
        <meta charset="utf-8">
        <!-- 調(diào)用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>

Lebar dan warna jidar CSS

Lebar sempadan

Lebar sempadan ditakrifkan mengikut lebar sempadan, yang boleh ditetapkan atas, bawah, kiri dan kanan masing-masing. -lebar kiri

lebar-sempadan-kanan

Warna sempadan

Lebar sempadan ditakrifkan oleh warna sempadan, dan bahagian atas dan bawah juga boleh ditetapkan secara berasingan 4 atribut di kiri dan kanan

warna atas sempadan

warna-bawah-sempadan

warna sempadan-kiri

warna-sempadan-kanan

<!DOCTYPE html>
<html>
    <head>
        <title>測試內(nèi)邊距</title>
        <meta charset="utf-8">
        <!-- 調(diào)用CSS樣式表 -->
        <style type="text/css">
            /*定義p標簽，是實線邊框*/
            p {border-style: solid;}
            .all {
                /*定義所有邊框?qū)挾葹?像素*/
                border-width: 5px; 
                /*定義所有邊框是顏色為橙色*/
                border-color: #FF8000
            }
            .top {
                /*定義上邊框?qū)挾葹?像素*/
                border-top-width: 5px; 
                /*定義上邊框是顏色為橙色*/
                border-top-color: #FF8000
            }
            .bottom {
                /*定義下邊框?qū)挾葹?像素*/
                border-bottom-width: 5px; 
                /*定義下邊框是顏色為橙色*/
                border-bottom-color: #FF8000
            }
            .left {
                /*定義左邊框?qū)挾葹?像素*/
                border-left-width: 5px; 
                /*定義左邊框是顏色為橙色*/
                border-left-color: #FF8000
            }
            .right {
                /*定義右邊框?qū)挾葹?像素*/
                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>

Tetapkan setiap sempadan secara individu

Dalam CSS, anda boleh menentukan sempadan berbeza pada sisi berbeza:

Instance

p{sempadan -gaya atas:bertitik;sempadan -gaya-kanan:pepejal;gaya-bawah-sempadan:bertitik;

gaya-sempadan-kiri:pepejal;

}

contoh di atas juga boleh menetapkan satu atribut:



gaya sempadan: padu bertitik

atribut gaya sempadan boleh mempunyai 1- 4 nilai:

gaya sempadan: pepejal bertitik dua putus putus;

Sempadan atas ialah bertitik


Sempadan kanan padatSempadan bawah adalah dua kali ganda

Sempadan kiri putus
gaya sempadan: bertitik dua padat ;

Sempadan atas bertitik

Sempadan kiri dan kanan padat

Sempadan bawah berganda

gaya sempadan: padat bertitik;

Sempadan atas dan bawah bertitik

Sempadan kanan dan kiri padat

gaya sempadan: bertitik;

Sempadan empat segi bertitik

Sempadan juga mempunyai atribut singkatan

sempadan: 5px merah pepejal;

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <title>測試內(nèi)邊距</title> <meta charset="utf-8"> <!-- 調(diào)用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>