Sempadan CSS
Sempadan elemen ialah satu atau lebih baris yang mengelilingi kandungan dan padding elemen.
Sifat sempadan CSS membolehkan anda menentukan gaya, lebar dan warna sempadan elemen.
Sempadan CSS
Dalam HTML, kami menggunakan jadual untuk mencipta sempadan di sekeliling teks, tetapi dengan menggunakan sifat sempadan CSS, kami boleh mencipta sempadan yang menakjubkan dan boleh digunakan kepada mana-mana elemen.
Bidar dalam elemen ialah sempadan elemen. Sempadan elemen ialah satu atau lebih garisan yang mengelilingi kandungan unsur dan sempadan dalam.
Setiap jidar mempunyai 3 aspek: lebar, gaya dan warna. Dalam halaman berikut, kami akan menerangkan tiga aspek ini kepada anda secara terperinci.
Sempadan dan Latar Belakang
Spesifikasi CSS menyatakan bahawa sempadan dilukis "di atas latar belakang elemen." Ini penting kerana sesetengah sempadan "terganggu" (contohnya, sempadan bertitik atau putus-putus) dan latar belakang elemen harus muncul di antara bahagian sempadan yang boleh dilihat.
CSS2 menyatakan bahawa latar belakang hanya memanjang ke padding, bukan sempadan. Kemudian CSS2.1 membuat pembetulan: latar belakang elemen ialah latar belakang kandungan, padding dan kawasan sempadan. Kebanyakan penyemak imbas mengikut definisi CSS2.1, walaupun sesetengah penyemak imbas lama mungkin berkelakuan berbeza.
Gaya sempadan
Gaya ialah aspek paling penting bagi sempadan, dan ini bukan kerana gaya mengawal paparan sempadan (sudah tentu, style memang mengawal paparan sempadan) , tetapi kerana tanpa gaya tidak akan ada sempadan sama sekali.
Sifat gaya sempadan CSS mentakrifkan 10 gaya bukan warisan yang berbeza, termasuk tiada satu pun.
Sebagai contoh, anda boleh mentakrifkan sempadan imej sebagai permulaan untuk menjadikannya kelihatan seperti "butang dinaikkan":
a:link img {border-style: outset; 🎜>
nilai gaya sempadan:
tiada: Tanpa sempadan lalai
bertitik: bertitik: Tentukan bingkai garis bertitik
terputus-putus: Takrifkan kotak putus-putus
pepejal: Takrifkan sempadan pepejal
ganda: Takrifkan dua sempadan. Lebar dua sempadan dan nilai lebar sempadan adalah sama
alur: Tentukan sempadan alur 3D. Kesannya bergantung pada nilai warna sempadan
rabung: Mentakrifkan sempadan rabung 3D. Kesannya bergantung pada nilai warna sempadan
inset: Mentakrifkan sempadan terbenam 3D. Kesannya bergantung pada nilai warna jidar
permulaan: Mentakrifkan jidar 3D yang menonjol. Kesannya bergantung pada nilai warna jidar
Tentukan berbilang gaya
Anda boleh menentukan berbilang gaya untuk jidar, contohnya:
p .aside {border-style: solid dotted dashed double;}
Peraturan di atas mentakrifkan empat gaya jidar untuk perenggan dengan nama kelas diketepikan: jidar atas pepejal, jidar kanan bertitik dan jidar sempadan bawah bertitik dan sempadan kiri garisan dua.
Kami melihat sekali lagi bahawa nilai di sini menggunakan susunan atas-kanan-bawah-kiri Kami juga telah melihat susunan ini apabila membincangkan cara menetapkan pelapik yang berbeza dengan berbilang nilai.
Tentukan gaya satu sisi
Jika anda ingin menetapkan gaya sempadan untuk satu sisi kotak elemen dan bukannya menetapkan gaya sempadan untuk semua 4 sisi, anda boleh menggunakan atribut gaya sempadan satu sisi berikut:
gaya atas-sempadan
gaya-kanan-sempadan
gaya-bawah-sempadan
gaya-kiri-sempadan
Jadi kedua-dua kaedah ini adalah bersamaan:
p {gaya sempadan: pepejal pepejal tiada;}
p {gaya sempadan: pepejal-; gaya kiri: tiada;}
Nota: Jika anda ingin menggunakan kaedah kedua, anda mesti meletakkan atribut unilateral selepas atribut yang disingkatkan. Kerana jika anda meletakkan atribut satu sisi sebelum gaya sempadan, nilai atribut yang disingkatkan akan menimpa nilai satu sisi tiada.
Border - atribut trengkas
Contoh di atas menggunakan banyak atribut untuk menetapkan sempadan.
T Anda juga boleh menetapkan sempadan dalam harta.
Anda boleh menetapkannya dalam atribut "sempadan":
lebar sempadan
gaya sempadan (diperlukan)
warna sempadan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p
{
border:5px solid orange;
}
</style>
</head>
<body>
<p>段落文字部分</p>
</body>
</html> Atribut bingkai CSS
Penerangan atribut
Atribut singkatan sempadan, yang digunakan untuk menetapkan atribut untuk empat sisi dalam satu deklarasi.
Gaya Sempadan digunakan untuk menetapkan gaya semua sempadan elemen, atau menetapkan gaya sempadan untuk setiap sisi. Atribut singkatan Border-Width, untuk menetapkan lebar untuk semua sempadan elemen, atau tetapkan lebar untuk setiap sempadan sahaja.
Atribut singkatan warna sempadan, warna bahagian semua sempadan elemen boleh ditetapkan atau warna ditetapkan secara berasingan untuk 4 sisi. atribut Singkatan bawah sempadan, digunakan untuk menetapkan semua atribut sempadan bawah ke dalam satu pernyataan. warna sempadan-bawah Tetapkan warna sempadan bawah elemen. gaya bawah sempadan Tetapkan gaya sempadan bawah elemen.
lebar-bawah-sempadan Tetapkan lebar sempadan bawah elemen.
Atribut singkatan Border-Left, yang digunakan untuk menetapkan semua atribut bingkai kiri ke dalam pernyataan. warna-sempadan-kiri Tetapkan warna sempadan kiri elemen. gaya-kiri sempadan Tetapkan gaya sempadan kiri elemen. lebar-kiri sempadan Tetapkan lebar sempadan kiri elemen. atribut Shorthand kanan sempadan, digunakan untuk menetapkan semua atribut sempadan kanan ke dalam satu pernyataan. warna sempadan-kanan Tetapkan warna jidar kanan elemen. gaya sempadan kanan Tetapkan gaya sempadan kanan elemen. lebar-sempadan-kanan Tetapkan lebar sempadan kanan elemen. atribut Shorthand atas sempadan, digunakan untuk menetapkan semua atribut sempadan atas ke dalam satu pernyataan. warna atas sempadan Tetapkan warna sempadan atas elemen. gaya atas sempadan Tetapkan gaya sempadan atas elemen. lebar atas sempadan Tetapkan lebar sempadan atas elemen.
bahagian seterusnya
