Nilai properti perbatasan putus-putus asli tidak menawarkan kontrol atas tanda hubung itu sendiri ... jadi bawa border-image
properti itu!
Buat perbatasan Anda sendiri dengan border-image
Kompatibilitas : Menawarkan dukungan browser yang hebat (IE 11 dan semua browser modern). Batas normal dapat disetel sebagai cadangan untuk browser lama.
Mari buat ini
Perbatasan ini akan menampilkan lintas browser yang sama persis!
Langkah 1 - Buat gambar yang sesuai
Contoh ini adalah lebar 15 piksel kali tinggi 15 piksel dan lebar celah saat ini adalah 5 piksel. Ini adalah .png dengan transparansi.
Seperti inilah tampilannya di photoshop saat diperbesar:
Seperti inilah ukurannya untuk diukur:
Mengontrol celah dan panjang pukulan
Untuk membuat celah atau goresan yang lebih lebar / pendek, perlebar / persingkat celah atau goresan pada gambar.
Berikut adalah gambar dengan celah 10px yang lebih lebar:
skala dengan benar =
Langkah 2 - Buat CSS - contoh ini memerlukan 4 langkah dasar
Tentukan sumber gambar-perbatasan :
border-image-source:url("http://i.stack.imgur.com/wLdVc.png");
Opsional - Tentukan lebar gambar tepi :
border-image-width: 1;
Nilai defaultnya adalah 1. Ini juga dapat diatur dengan nilai piksel, nilai persentase, atau sebagai kelipatan lainnya (1x, 2x, 3x dll). Ini mengesampingkan border-width
set apa pun .
Tentukan potongan-gambar-perbatasan :
Dalam contoh ini, ketebalan batas atas, kanan, bawah, dan kiri gambar adalah 2px, dan tidak ada celah di luarnya, jadi nilai potongan kami adalah 2:
border-image-slice: 2;
Irisannya terlihat seperti ini, 2 piksel dari atas, kanan, bawah dan kiri:
Tentukan pengulangan gambar perbatasan :
Dalam contoh ini, kami ingin pola berulang secara merata di sekitar div kami. Jadi kami memilih:
border-image-repeat: round;
Menulis singkatan
Properti di atas dapat diatur secara individual, atau singkatnya menggunakan gambar tepi :
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
Contoh lengkap
Perhatikan border: dashed 4px #000
fallback. Browser yang tidak mendukung akan menerima batas ini.
.bordered {
display: inline-block;
padding: 20px;
/* Fallback dashed border
- the 4px width here is overwritten with the border-image-width (if set)
- the border-image-width can be omitted below if it is the same as the 4px here
*/
border: dashed 4px #000;
/* Individual border image properties */
border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
border-image-slice: 2;
border-image-repeat: round;
/* or use the shorthand border-image */
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}
/*The border image of this one creates wider gaps*/
.largeGaps {
border-image-source: url("http://i.stack.imgur.com/LKclP.png");
margin: 0 20px;
}
<div class="bordered">This is bordered!</div>
<div class="bordered largeGaps">This is bordered and has larger gaps!</div>
border-style: solid
(atau sesuatu yang serupa) jika Anda menghilangkan fallback.Selain
border-image
properti, ada beberapa cara lain untuk membuat batas putus-putus dengan mengontrol panjang guratan dan jarak di antara mereka. Mereka dijelaskan di bawah ini:Metode 1: Menggunakan SVG
Kita dapat membuat perbatasan putus-putus dengan menggunakan
path
ataupolygon
elemen dan mengaturstroke-dasharray
properti. Properti mengambil dua parameter di mana yang satu menentukan ukuran tanda hubung dan yang lainnya menentukan ruang di antara keduanya.Kelebihan:
border-radius
terlibat. Kami hanya akan menggantipath
dengancircle
seperti dalam jawaban ini (atau) ubahpath
menjadi lingkaran.Kekurangan:
vector-effect='non-scaling-stroke'
(seperti di kotak kedua) tetapi dukungan browser untuk properti ini nihil di IE.Tampilkan cuplikan kode
Metode 2: Menggunakan Gradien
Kita dapat menggunakan beberapa
linear-gradient
gambar latar belakang dan memposisikannya dengan tepat untuk menciptakan efek garis putus-putus. Ini juga dapat dilakukan dengan arepeating-linear-gradient
tetapi tidak banyak peningkatan karena menggunakan gradien berulang karena kita membutuhkan setiap gradien untuk diulang hanya dalam satu arah.Tampilkan cuplikan kode
Kelebihan:
Kekurangan:
border-radius
dilibatkan karena latar belakang tidak berdasarkan kurvaborder-radius
. Mereka malah dipotong.Metode 3: Bayangan Kotak
Kita dapat membuat bar kecil (dalam bentuk tanda hubung) menggunakan elemen semu dan kemudian membuat beberapa
box-shadow
versi untuk membuat batas seperti pada cuplikan di bawah ini.Jika tanda hubung berbentuk persegi maka satu pseudo-element sudah cukup tetapi jika itu adalah persegi panjang, kita akan membutuhkan satu pseudo-element untuk batas atas + bawah dan satu lagi untuk batas kiri + kanan. Ini karena tinggi dan lebar tanda pisah di tepi atas akan berbeda dari yang di sebelah kiri.
Kelebihan:
Kekurangan:
border-radius
tetapi memposisikannya akan sangat rumit dengan harus menemukan titik pada lingkaran (dan mungkin genaptransform
).Tampilkan cuplikan kode
sumber
pointer-events:none
ke svg inorder agar dapat berinteraksi dengan konten.Singkatnya: Tidak, tidak. Anda harus bekerja dengan gambar sebagai gantinya.
sumber
Ada alat keren yang dibuat oleh @kovart yang disebut generator perbatasan putus - putus .
Ini menggunakan svg sebagai gambar latar belakang untuk memungkinkan pengaturan array stroke dash yang Anda inginkan, dan cukup nyaman.
Anda kemudian hanya akan menggunakannya sebagai properti latar belakang pada elemen Anda di tempat perbatasan:
sumber
Panjang goresan tergantung pada lebar goresan. Anda dapat menambah panjang dengan menambah lebar dan menyembunyikan bagian perbatasan dengan elemen dalam.
https://jsfiddle.net/ok6srt2z/
sumber
pointer-events: none
untuk mencegah masalah overlay.Saya baru saja mengalami masalah yang sama.
Saya berhasil menyelesaikannya dengan dua div yang benar-benar diposisikan membawa perbatasan (satu untuk horizontal dan satu untuk vertikal), dan kemudian mengubahnya. Kotak luar hanya perlu ditempatkan secara relatif.
Catatan: Saya menggunakan tachyons dalam contoh ini, tetapi saya kira kelasnya cukup jelas.
sumber
Ini akan membuat perbatasan oranye dan abu-abu menggunakan class = "myclass" pada div.
sumber