gaya sempadan (harta CSS)

3

sintaks

gaya sempadan

:

{{ none

|

tersembunyi | Dotted | Dashed | pepejal | double | Groove | rabung | inset | Outset } 1 hingga 4 nilai | mewarisi } ; Keterangan ^{Gaya Sempadan Sempadan Shorthand menetapkan gaya sempadan pada semua empat sisi elemen menggunakan nilai yang ditentukan. Setiap sempadan boleh mempunyai nilai sendiri -merujuk kepada mnemonik (masalah) dalam sifat -sifat tersendiri untuk cara mudah untuk mengingati perintah tersendiri. Sempadan diletakkan di atas latar belakang elemen. ke atas, sempadan putus -putus ke bahagian bawah, dan sempadan bertitik ke sisi kiri dan kanan perenggan dalam elemen dengan ID "Contoh":} nilai

tidak bermaksud tidak ada sempadan yang akan ditunjukkan, dan lebar sempadan yang dikira adalah sifar.

#example p {
  border-style: solid dotted dashed;
}

Tersembunyi mempunyai makna yang sama seperti tidak, kecuali apabila ia merujuk kepada sempadan meja dalam kes di mana dua sel berkongsi sempadan, dan sel-sel meja telah runtuh sempadan (runtuh sempadan: runtuh;). Nilai tersembunyi memastikan bahawa tiada sempadan ditarik, kerana tersembunyi mengambil keutamaan ke atas semua gaya sempadan yang lain. Sekiranya tidak ada yang digunakan untuk satu sempadan di dalam sel, sempadan masih akan ditarik, kerana sempadan sel bersebelahan akan diutamakan. Lihat pemformatan jadual untuk maklumat lanjut.

• Dotted melaksanakan sempadan sebagai satu siri titik.

• Dashed melaksanakan sempadan sebagai satu siri sengkang.

• Pepejal melaksanakan sempadan sebagai garis pepejal.

• Melaksanakan Double Border sebagai dua garis pepejal. Jumlah dua lebar sempadan dan ruang di antara mereka sama dengan nilai yang telah ditetapkan untuk lebar sempadan.

Alur adalah kesan tiga dimensi yang memberi kesan bahawa sempadan diukir ke dalam kanvas.

• rabung adalah kesan 3D yang mempunyai kesan yang bertentangan dengan alur, di mana sempadan kelihatan menonjol dari kanvas.

• inset adalah kesan 3D yang memberikan gambaran bahawa kotak itu tertanam ke dalam kanvas. Apabila ia digunakan pada jadual yang mana model Borders yang dipisahkan telah digunakan, nilai inset muncul untuk menjadikan seluruh kotak kelihatan seolah -olah ia tertanam ke dalam kanvas. Apabila digunakan dengan model sempadan yang runtuh, ia dirawat sama seperti rabung nilai.

• awal adalah kesan 3D yang mempunyai kesan yang bertentangan dengan inset di mana sempadan memberikan gambaran bahawa kotak menonjol dari kanvas. Apabila ia digunakan pada jadual yang mana model Borders yang dipisahkan telah digunakan, sempadan menjadikan seluruh kotak kelihatan seolah -olah ia keluar dari kanvas. Apabila ia digunakan dengan model sempadan yang runtuh, ia berkelakuan dengan cara yang sama seperti alur.

Sebelum ini, dalam CSS1, ejen pengguna dibenarkan untuk menafsirkan semua gaya bertitik, putus -putus, berganda, alur, rabung, inset, dan gaya awal sebagai pepejal.

Soalan Lazim (Soalan Lazim) Mengenai Gaya Sempadan CSS

Apakah pelbagai jenis gaya sempadan dalam CSS?

Dalam CSS, terdapat beberapa jenis gaya sempadan yang boleh anda gunakan untuk menyesuaikan penampilan elemen web anda. Ini termasuk 'Tiada', 'Tersembunyi', 'Dotted', 'Dashed', 'Solid', 'Double', 'Groove', 'Ridge', 'Inset', dan 'Outset'. Setiap gaya mempunyai kesan visual yang unik. Sebagai contoh, 'bertitik' mewujudkan sempadan dengan satu siri titik, manakala 'double' mencipta sempadan garis berganda.

Bagaimana saya boleh menetapkan lebar dan warna sempadan di CSS? > Dalam CSS, anda boleh menetapkan lebar dan warna sempadan menggunakan sifat 'sempadan lebar' dan 'sempadan' masing-masing. Sebagai contoh, untuk menetapkan lebar sempadan 5 piksel dan warna merah, anda akan menggunakan kod berikut:

lebar sempadan: 5px;
Border-color: merah; > Apakah perbezaan antara gaya sempadan 'tidak ada' dan 'tersembunyi' dalam CSS? Nampaknya sama, tetapi mereka mempunyai perbezaan yang halus. 'Tiada' bermaksud bahawa tiada sempadan ditarik, sementara 'tersembunyi' bermaksud bahawa sempadan ditarik tetapi tidak dapat dilihat. Perbezaan ini paling ketara dalam unsur -unsur jadual di mana 'tersembunyi' boleh digunakan untuk menyembunyikan sempadan antara sel.

Bagaimana saya boleh menentukan gaya sempadan yang berbeza untuk bahagian yang berbeza dari elemen dalam css? CSS, anda boleh menentukan gaya sempadan yang berlainan untuk sisi yang berlainan dari elemen menggunakan gaya 'sempadan atas', 'gaya kanan sempadan', 'Sempadan-Bottom-Style', dan 'Sempadan-Kiri-gaya'. Sebagai contoh, untuk menetapkan sempadan pepejal di bahagian atas dan sempadan bertitik di bahagian bawah, anda akan menggunakan kod berikut:

Border-top-style: pepejal; ;

Bagaimana saya boleh menggunakan harta tanah 'sempadan' di CSS? Tetapkan lebar, gaya, dan warna sempadan dalam satu baris kod. Sintaks adalah 'Sempadan: Warna Gaya Lebar;'. Sebagai contoh, untuk menetapkan sempadan merah pepejal 5 piksel, anda akan menggunakan kod berikut:

sempadan: 5px merah pepejal;

Apakah gaya sempadan lalai dalam CSS?

Gaya sempadan lalai dalam CSS adalah 'Tiada', yang bermaksud tiada sempadan ditarik. Jika anda ingin menambah sempadan ke elemen, anda perlu menentukan gaya sempadan selain daripada 'tidak ada'. Anda boleh menggunakan kod warna heksadesimal untuk menentukan warna sempadan dalam CSS. Sebagai contoh, untuk menetapkan warna sempadan menjadi biru muda, anda akan menggunakan kod berikut:

Border-color: #add8e6;

Bagaimana saya boleh membuat sempadan bulat di CSS?
Anda boleh membuat sempadan bulat di CSS menggunakan harta 'Radius Sempadan'. Harta ini membolehkan anda menetapkan jejari sudut sempadan, mewujudkan kesan bulat. Sebagai contoh, untuk menetapkan jejari sempadan 10 piksel, anda akan menggunakan kod berikut:

radius sempadan: 10px;

Ya, anda boleh menggunakan harta 'sempadan' di CSS untuk menambah sempadan ke imej. Ini berguna untuk menonjolkan imej atau memisahkannya dari unsur -unsur lain di halaman. CSS adalah sedikit lebih kompleks dan memerlukan menggunakan imej latar belakang dengan kecerunan linear dan menyesuaikan sifat padding dan klip latar belakang. Berikut adalah contoh bagaimana anda boleh melakukannya:

.box {
latar belakang: linear-gradient (ke bawah, merah, biru);

lebar sempadan: 10px;

sempadan -Style: pepejal;

Imej sempadan: gradien linear (ke bawah, merah, biru) 1; }

Atas ialah kandungan terperinci gaya sempadan (harta CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!