Lebih banyak kawalan ke atas sempadan CSS dengan imej latar belakang

Sempadan CSS standard menawarkan penyesuaian terhad untuk gaya putus -putus atau putus -putus. Contohnya:

 .box {
   Sempadan: 1px putus -putus hitam;
   Sempadan: 3px berwarna merah;
}

Pendekatan ini tidak mempunyai kawalan ke atas panjang dash/jurang, sudut, pudar, atau animasi. Walau bagaimanapun, teknik pintar dapat mengatasi batasan -batasan ini.

Penjana sempadan Amit Sheen menunjukkan kaedah yang kuat: menggunakan empat latar belakang berganda. Harta background menerima nilai yang dipisahkan koma. Dengan menentukan empat latar belakang (atas, kanan, bawah, kiri), masing -masing digayakan sebagai sempadan, kawalan yang luas dicapai.

Contoh:

 .box {
  Imej-imej latar belakang: mengulangi-linear-gradien (0deg, #333333, #333333 10px, telus 10px, telus 20px, #333333 20px), mengulangi-linear-gradient (90deg, #33333, #333333333 20px), mengulangi-linear-gradient (180deg, #333333, #333333 10px, telus 10px, telus 20px, #333333 20px), mengulang-linear-gradient (270deg, #33333, #33333333 20px);
  Latar Belakang: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
  Latar Belakang-kedudukan: 0 0, 0 0, 100% 0, 0 100%;
  Latar Belakang berulang: tidak berulang;
}

Ini membuka kunci pilihan gaya maju yang sebelum ini tidak tersedia dengan sempadan mudah.

Atas ialah kandungan terperinci Lebih banyak kawalan ke atas sempadan CSS dengan imej latar belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!