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>测试内边距</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>
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 kananwarna atas sempadan
warna-bawah-sempadan
warna sempadan-kiri
warna-sempadan-kanan
<!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>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:
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;