Bagaimanakah Saya Boleh Menyesuaikan Panjang Lejang Sempadan Sempadan dan Jarak dalam CSS?

Menyesuaikan Panjang Lejang Sempadan Terputus-putus dan Jarak dalam CSS

Keterbatasan Harta Sempadan Asli

Hartanah sempadan asli CSS menyediakan kawalan terhad ke atas sempadan putus-putus, kekurangan keupayaan untuk melaraskan panjang lejang dan jarak.

Memperkenalkan imej sempadan

Untuk mendapatkan fleksibiliti yang lebih besar, manfaatkan kuasa harta imej sempadan. Teknik ini mensimulasikan sempadan putus-putus menggunakan imej, menawarkan kawalan terperinci ke atas penampilannya.

Panduan Langkah demi Langkah

1. Buat Imej: Reka bentuk dan eksport imej yang mewakili corak strok yang diingini. Pastikan ketelusan untuk membenarkan paparan latar belakang. Laraskan lebar dan jurang dalam imej untuk mengawal sifat strok.

2. Persediaan CSS:

   • Tetapkan sumber imej sempadan: Tentukan URL kepada imej yang dibuat dalam Langkah 1.
   • Pilihan: lebar-imej sempadan: Tentukan lebar sempadan dalam piksel, peratusan atau berbilang lebar lejang (lalai: 1).
   • Tetapkan keping-imej sempadan: Tentukan ketebalan empat sisi imej yang digunakan sebagai sempadan.
   • Tetapkan border-image-repeat: Nyatakan cara imej diulang (cth., bulat, ulang).

Contoh Lengkap

.bordered {
  border: dashed 4px #000; /* Fallback for non-supporting browsers */
  border-style: dashed;
  border-image: url("https://i.sstatic.net/wLdVc.png") 2 round;
}

Mengawal Jurang dan Panjang Lejang

Untuk mengubah suai jurang dan panjang lejang, cuma edit imej dalam Photoshop atau alat yang serupa dan laraskan lebar celah dan lejang di dalamnya. Untuk jurang yang lebih luas, cipta imej yang jurangnya lebih besar.

Keserasian Penyemak Imbas

imej sempadan disokong dengan baik dalam penyemak imbas moden (IE 11 dan ke atas), menawarkan penampilan yang konsisten merentas penyemak imbas .

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