sempadan CSS
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 lalaibertitik: bertitik: Tentukan bingkai garis bertitikterputus-putus: Takrifkan kotak putus-putus pepejal: Takrifkan sempadan pepejal ganda: Takrifkan dua sempadan. Lebar dua sempadan dan nilai lebar sempadan adalah samaalur: 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;}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 bawah sempadan Tetapkan gaya sempadan bawah elemen.
lebar-bawah-sempadan Tetapkan lebar sempadan bawah elemen.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
