Bagaimanakah Saya Boleh Mengawal Panjang Lejang Sempadan Sempadan Dengan Tepat dan Jarak dalam CSS?

Mengawal Panjang dan Jarak Lejang Sempadan Berputus-putus

Walaupun CSS menyediakan sifat sempadan untuk mencipta sempadan putus-putus, ia tidak mempunyai pilihan penyesuaian untuk mengawal panjang atau jarak antara lejang. Artikel ini meneroka kaedah alternatif untuk mencapai kawalan yang lebih besar ke atas penampilan sempadan putus-putus.

Menggunakan imej sempadan

Sifat imej sempadan membolehkan penciptaan sempadan tersuai dengan menggunakan imej sebagai sumber. Tidak seperti sempadan, imej sempadan menawarkan lebih banyak kefleksibelan dalam menggayakan komponen sempadan, termasuk panjang dan jarak antara sempang.

Mencipta Imej:

Untuk mencipta sempang tersuai imej sempadan, anda perlu menggunakan editor imej seperti Photoshop. Imej hendaklah mempunyai lebar dan ketinggian yang sama, dengan panjang lejang dan celah diwakili sebagai kawasan lutsinar dan legap, masing-masing.

Melaksanakan dengan CSS:

border-image: url("path_to_image.png") <border-image-width> <border-image-slice> <border-image-repeat>;

• lebar-imej-sempadan: Mengawal lebar sempadan imej.
• keping-imej-sempadan: Menentukan ketebalan bahagian atas, kanan, bawah dan kiri sempadan.
• ulang-imej sempadan: Mentakrifkan gelagat pengulangan corak (cth., bulat untuk genap jarak).

Contoh:

.my-border {
  border-image: url("my_border_image.png") 2 round;
  border-style: dashed;
}

Dalam contoh ini, imej my_border_image.png mempunyai panjang lejang 2 piksel dan jurang 5 piksel . Sifat gaya sempadan ditetapkan kepada putus-putus untuk memaparkan jidar tersuai.

Melaraskan Panjang Lejang dan Jurang

Untuk melaraskan panjang lejang dan jurang, ubah suai imej dengan sewajarnya. Contohnya, untuk mencipta jurang yang lebih luas, tingkatkan kawasan lutsinar dalam imej. Untuk memanjangkan strok, kurangkan kawasan legap dalam imej.

Keserasian

imej sempadan disokong dengan baik oleh penyemak imbas moden, termasuk IE 11 dan semua penyemak imbas utama. Untuk penyemak imbas yang lebih lama, sifat sempadan sandaran boleh ditambah untuk memastikan keserasian.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengawal Panjang Lejang Sempadan Sempadan Dengan Tepat dan Jarak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!