Bagaimana untuk menetapkan gaya sempadan dalam css

CSS (Cascading Style Sheets) ialah bahasa penanda yang digunakan untuk reka bentuk web Ia menyediakan pelbagai gaya dan teknik untuk menjadikan halaman web lebih jelas dan cantik. Antaranya, menetapkan sempadan adalah aplikasi gaya biasa Dalam artikel ini, kita akan menyelidiki cara menetapkan sempadan dengan CSS.

1. Asas sempadan CSS

Pengetahuan prasyarat: Sempadan CSS terdiri daripada garisan, dan gaya, lebar dan warna garisan boleh ditetapkan.

Terdapat terutamanya atribut berikut untuk menetapkan sempadan dalam CSS:

1. gaya sempadan: gaya sempadan, yang boleh menjadi pepejal (garisan pepejal), bertitik (garis putus-putus), putus-putus ( garis putus-putus), dua (garis pepejal berganda), alur (garis alur 3D, warna sempadan tidak sah di bawah atribut ini), rabung (garis rabung 3D, warna sempadan tidak sah di bawah atribut ini), sisipan (Garis sisipan 3D, warna sempadan tidak sah di bawah atribut ini), permulaan (garisan permulaan 3D, warna sempadan tidak sah di bawah atribut ini), tiada (tiada sempadan).
2. lebar sempadan: lebar sempadan, yang boleh ditetapkan kepada nilai piksel tertentu atau tiga lebar nipis, sederhana dan tebal yang dipratentukan.
3. warna sempadan: warna sempadan, yang boleh ditetapkan kepada nilai warna tertentu atau lutsinar.

Atribut ini boleh ditetapkan secara individu atau digabungkan, contohnya:

sempadan: 2px pepejal #000;

Kod di atas bermaksud menetapkan sempadan, dengan lebar 2 px, gaya pepejal, warna hitam (#000).

2. Gaya sempadan CSS

Gaya sempadan adalah sangat penting dan boleh menentukan kesan visual halaman web. Berikut ialah beberapa gaya sempadan biasa:

1. Sempadan pepejal

Sempadan pepejal ialah yang paling biasa dan boleh ditetapkan menggunakan gaya sempadan: atribut pepejal.

Kod contoh:

.border-solid {
  border-style: solid;
  border-width: 2px;
  border-color: #000;
}

Rendering:

2. Sempadan bertitik

sempadan bertitik juga merupakan gaya yang kerap digunakan, yang boleh ditetapkan menggunakan gaya sempadan: atribut bertitik atau gaya sempadan: putus-putus. Selain itu, anda juga boleh menggunakan gaya sempadan: berganda untuk menetapkan garisan pepejal berganda, dan anda juga boleh menggunakan gaya sempadan: rabung, gaya sempadan: sisipan, gaya sempadan: permulaan untuk menetapkan sempadan kesan 3D.

Kod sampel:

.border-dotted {
  border-style: dotted;
  border-width: 2px;
  border-color: #000;
}

Rendering:

3. Sempadan tersuai

Dalam Selain gaya sempadan pratetap di atas, kami juga boleh menyesuaikan sempadan. CSS menyediakan atribut imej sempadan untuk membolehkan kami menyesuaikan sempadan. imej sempadan perlu menggunakan gambar sebagai sempadan Empat sudut dan empat sisi gambar boleh ditetapkan kepada lebar yang berbeza masing-masing, supaya kesan sempadan tersuai boleh dicapai.

Contoh kod:

.border-img {
  border-image: url("border.png") 30 30 30 30 / 10px;
}

Rendering:

3. CSS sempadan bucu bulat

bucu bulat Sempadan adalah sangat biasa dan boleh menambah kesan visual yang lembut pada halaman web, dan ia juga digunakan dalam banyak reka bentuk gaya kad.

CSS menyediakan atribut jejari sempadan untuk menetapkan darjah lengkok sempadan Ia boleh mengawal lengkok empat sudut pada masa yang sama, dan anda juga boleh menetapkan atribut sudut bulat bagi sempadan. sudut secara individu.

Kod contoh:

.border-radius {
  border: 2px solid #000;
  border-radius: 10px; /* 或者使用 border-radius: 10px 10px 10px 10px; */
}

Rendering:

4 kecerunan sempadan CSS

Gunakan jidar kecerunan Ia boleh menjadikan halaman web kelihatan lebih mewah, dan warna kecerunan juga boleh disesuaikan.

Kita boleh menggunakan sifat kecerunan linear dalam CSS3 untuk mencapai kesan sempadan kecerunan. Atribut kecerunan linear ialah fungsi kecerunan yang memerlukan penetapan warna, arah dan kedudukan permulaan kecerunan.

Kod sampel:

.gradient-border {
  border: 2px solid;
  border-image: linear-gradient(to right top, #ff8177, #ff867a, #ff8c7f, #f99185, #cf556c, #b12a5b, #8b0f4d, #610528) 1;
}

Rendering:

5 Ringkasan

Artikel ini memperkenalkan CSS Basic pengetahuan tentang menetapkan sempadan, termasuk gaya sempadan, lebar, warna dan kesan seperti bucu bulat dan kecerunan. Gaya sempadan boleh dicapai melalui tetapan sifat CSS yang mudah, dan sempadan juga boleh disesuaikan, yang boleh menjadikan halaman web lebih unik dan jelas.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya sempadan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!