Menghias web dengan gambar sempadan CSS

Sebelum ini, menambah unsur -unsur hiasan ke laman web (seperti sempadan mewah) memerlukan mengiris imej dan dengan sabar menyesuaikan kod CSS sehingga kesannya memuaskan.

CSS kini memudahkan proses ini. Hanya beberapa baris kod untuk menambah sempadan yang agak kompleks ke laman web anda. Artikel ini akan menunjukkan kepada anda bagaimana untuk melakukan ini.

mata utama

• CSS membolehkan menambahkan sempadan kompleks ke laman web dengan hanya beberapa baris kod, termasuk menambah imej latar belakang di sempadan menggunakan harta border-image-source.
• Properties memohon imej yang dipilih ke sempadan, membahagikan imej ke sembilan kawasan: empat sudut, empat sisi, dan satu kawasan tengah. . border-image-slice Properties Reka bentuk sifat dalaman di dalam kawasan imej sempadan, manakala harta
membolehkan kawasan imej sempadan ditolak di luar bingkai sempadan.
• border-image-width Anda boleh menggunakan singkatan border-image-outset harta untuk menetapkan semula harta , yang dengan cepat menetapkan semula lebar, warna, dan gaya semua empat sempadan elemen. Pada masa penulisan,
disokong sepenuhnya dalam hampir semua pelayar utama.
• border border-image border-image Properties Image Sempadan

Kaedah umum untuk menetapkan gaya sempadan adalah dengan menggunakan peraturan preset . Peraturan ini termasuk: ,

,

, border-style, dotted, dashed, solid, double, groove dan ridge. inset outset Gaya ini sudah menawarkan beberapa pilihan. Walau bagaimanapun, anda boleh melangkah lebih jauh dan menggunakan sifat CSS berikut untuk menambah imej latar belakang yang menarik ke sempadan.

Gunakan harta ini, anda boleh menetapkan imej latar belakang ke sempadan elemen. Nilai ini biasanya url imej: border-image-source

anda akan mendapati bahawa kesan kecerunan CSS sama baiknya:

element {
  border-image-source: url('myimage.png');
}

Dalam penyemak imbas, nampaknya ini:

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

Jika anda menetapkan harta ini ke nilai

, atau imej tidak dapat dipaparkan, penyemak imbas akan menggunakan set nilai untuk harta

. Oleh itu, lebih baik menggunakan sebagai pelan sandaran. none border-style Imej yang anda gunakan tidak perlu memadankan lebar dan ketinggian sempadan. Keindahan imej sempadan CSS adalah bahawa anda hanya memerlukan imej kecil untuk menghiasi sempadan elemen lebar dan ketinggian, termasuk unsur -unsur yang menyesuaikan diri dengan saiz skrin yang berbeza. border-style

Selepas memilih imej dengan harta

, anda boleh menggunakan harta border-image-slice untuk memohon ke sempadan.

element {
  border-image-source: url('myimage.png');
}

mari kita pelajari lebih lanjut dengan lebih terperinci. Reka bentuk hartanah ini berasal dari offset dalaman di bahagian atas, kanan, bawah, dan kiri. Offset ini akhirnya akan memotong imej kecil anda ke sembilan kawasan: empat sudut, empat sisi, dan satu kawasan tengah.

Anda boleh menentukan satu hingga empat nombor nombor atau peratusan. Apabila anda menentukan empat nilai, ia digunakan untuk bahagian atas, kanan, bawah, dan kiri. Jika anda melangkau offset kiri, ini akan sama dengan yang betul. Jika anda terlepas offset bawah, ini akan sama dengan bahagian atas. Menghilangkan nilai offset ke kanan akan menjadikannya sama dengan bahagian atas. Jika anda hanya menggunakan satu nilai, ia akan digunakan untuk semua empat offset.

Nilai peratusan merujuk kepada peratusan saiz imej -lebar imej dari offset mendatar dan ketinggian imej mengimbangi menegak.

Nombor mewakili piksel dalam imej, atau dalam kes imej vektor, koordinat. Satu lagi perkara, jangan tambah px selepas nombor, ini tidak akan berfungsi!

Berikut adalah bagaimana anda boleh menggunakan border-image-slice:

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

element {
  border-image-slice: 19;
}

Gunakan imej saiz 100 x 100 piksel sebagai sempadan, dan penampilannya adalah seperti berikut:

Kesan akhir adalah seperti berikut:

Kawasan tengah kelihatan benar -benar telus dan oleh itu tidak dapat dilihat. Jika anda ingin menjadikannya kelihatan, tambahkan kata kunci fill.

Sebagai contoh, menggunakan imej dengan kawasan tengah yang benar -benar legap tanpa menambah kata kunci fill akan sama persis dengan contoh di atas. Walau bagaimanapun, sila gunakan kata kunci fill seperti berikut:

<div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

Gunakan imej yang mengandungi butiran di kawasan tengah:

maka kita dapati bahawa kawasan tengah imej dapat dilihat sepenuhnya pada halaman, walaupun sedikit kabur dan dimampatkan:

border-image-width Harta ini ditarik di dalam kawasan imej sempadan yang dipanggil. Secara lalai, sempadan kawasan ini adalah sempadan kotak sempadan. Seperti harta

,

merekabentuk offset dalaman, membahagikan imej ke sembilan kawasan. border-image-slice border-image-width Harta ini menerima satu hingga empat nilai (atas, kanan, bawah, kiri) dan boleh menggunakan nombor atau peratusan. Peratusannya adalah relatif kepada saiz kawasan imej sempadan, iaitu lebar kawasan offset mendatar dan ketinggian kawasan mengimbangi menegak. Jika anda menggunakan nombor tanpa unit

, nombor -nombor ini akan sama dengan gandaan lebar sempadan yang sepadan. Sebagai contoh, kod berikut:

element {
  border-image-source: url('myimage.png');
}

... Tetapkan lebar imej sempadan hingga 3 kali nilai lebar sempadan, iaitu 19 piksel. Hasilnya adalah seperti berikut:

Saya mendapati bahawa memberikan nilai yang sama kepada sifat border-image-width dan border-image-slice memastikan imej sempadan anda dipaparkan dalam keadaan terbaik tanpa ubah bentuk yang tidak diingini.

border-image-outset Semua sifat yang saya gunakan setakat ini telah gagal ke kawasan imej sempadan tertanam. Walau bagaimanapun, anda boleh memilih untuk menolak kawasan imej sempadan di luar kotak sempadan. Anda boleh menggunakan atribut

untuk melaksanakannya. border-image-outset

Harta ini mengambil satu hingga empat nilai (atas, kanan, bawah, kiri) dan dinyatakan dalam bilangan atau unit panjang (seperti

, px, dan lain -lain). Jika anda menggunakan nombor, hasilnya ialah imej sempadan ditolak di luar kotak sempadan, dengan gandaan menjadi lebar sempadan yang dikira. em

untuk menggambarkan lebih lanjut, saya telah menarik garis besar hijau untuk mewakili sempadan. Kawasan imej sempadan mengandungi imej sempadan merah jambu. Dalam keadaan tertanam lalai, imej sempadan terletak di dalam garis besar hijau. Ini bermakna kawasan imej sempadan berada dalam bingkai sempadan.

Menambah ke set peraturan CSS menolak imej sempadan merah jambu di luar garis hijau bertitik. Ini bermakna bahawa kawasan imej sempadan ditarik di luar sempadan: border-image-outset: 19px;

Sila ambil perhatian bahawa bahagian imej sempadan yang terletak di luar kotak sempadan tidak akan mencetuskan menatal, dan juga peristiwa tetikus akan ditangkap.

border-image-repeat Harta ini menyediakan beberapa pilihan tentang cara skala dan irisan imej jubin di sisi dan bahagian tengah sempadan. Nilai pertama digunakan pada bahagian mendatar (atas dan bawah) dan nilai kedua digunakan pada sisi menegak (kanan dan kiri). Jika anda menetapkan hanya satu nilai, nilai akan digunakan untuk kedua -dua sisi mendatar dan menegak.

Nilai yang tersedia termasuk:

• stretch - Jika anda tidak menggunakan atribut border-image-repeat, ini adalah nilai lalai. Kata kunci ini membentangkan imej untuk mengisi kawasan yang ada.
• repeat - Image Tiling mengulangi untuk mengisi kawasan yang ada. Sekiranya kawasan yang ada tidak boleh dibahagikan dengan lebar berjubin, imej itu boleh dipotong.
• round - Sama seperti repeat, tetapi jika ruang tidak mencukupi untuk menampung jubin, jubin diperkuat sehingga mereka semua sesuai. Ini memastikan bahawa jubin tidak akan dipotong, tetapi imej mungkin kelihatan sedikit dimampatkan.
• space - Sama seperti repeat, tetapi jika ruang itu tidak banyak lebar jubin, ruang putih tambahan akan diedarkan secara merata di sekitar setiap jubin.

seperti penulisan ini, Firefox nampaknya menjadikan space sama seperti stretch, sementara Chrome membuat space sama seperti repeat.

border-image atribut singkatan

anda boleh memampatkan semua sifat individu yang dibincangkan di atas ke border-image sifat singkatan seperti berikut:

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
Berikut adalah coretan kod:
5. border-image-repeat
Apa yang harus saya lakukan jika saya mahu memadam imej sempadan?

Cara terbaik untuk menetapkan semula sempadan adalah dengan menggunakan singkatan

atribut. Menggunakan

element {
  border-image-source: url('myimage.png');
}

, anda boleh dengan cepat menetapkan semula lebar, warna, dan gaya yang sama dari empat sempadan elemen. Tidak perlu menentukan peraturan

, dan anda juga tidak perlu mengatasi sebarang atribut

.

border Sokongan penyemak imbas border border-image: none Pada masa penulisan, border-image disokong sepenuhnya dalam hampir semua pelayar utama. Hanya Firefox tidak dapat meregangkan imej SVG merentasi unsur -unsur, Opera Mini menyokong sintaks singkatan dengan awalan

, tetapi tidak menyokong atribut tunggal.

Kesimpulan

border-image Artikel ini terutamanya memperkenalkan atribut -o-: nilai -nilai yang diterima, cara terbaik untuk digunakan, dan tahap sokongan penyemak imbas pada masa penulisan.

Anda boleh mendapatkan lebih banyak butiran dalam latar belakang CSS dan dokumentasi spesifikasi Tahap 3 CSS.

Jika anda menggunakan atribut border-image dalam projek anda, mengapa tidak berkongsi hasil akhir dengan komuniti?

nantikan balasan anda!

Soalan Lazim (FAQ) di laman web menghias dengan imej sempadan CSS border-image

Bagaimana untuk membuat imej sempadan CSS?

Membuat imej sempadan CSS melibatkan menggunakan atribut

. Harta ini membolehkan anda menentukan imej yang digunakan sebagai sempadan di sekitar elemen. Sintaks harta ini adalah seperti berikut:

element {
  border-image-source: url('myimage.png');
}

source adalah URL imej yang anda mahu gunakan. slice mentakrifkan offset dalaman imej. width menetapkan lebar sempadan. outset Menentukan jarak dari kawasan imej sempadan di luar sempadan. repeat Menentukan bagaimana imej itu berjubin atau diulang.

Apakah gaya sempadan yang berbeza dalam CSS?

CSS menyediakan beberapa gaya sempadan yang boleh anda gunakan untuk menyesuaikan penampilan elemen web. Ini termasuk: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, dotted, double ,

dan

. Setiap gaya menghasilkan kesan visual yang berbeza. Sebagai contoh,

mencipta sempadan dengan siri titik, manakala

mencipta sempadan dua talian. inset

Bagaimana untuk membuat sempadan tertanam menggunakan CSS?

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

sempadan dalam talian boleh dibuat dalam CSS menggunakan gaya sempadan

. Gaya ini menjadikan kotak kelihatan seperti ia tertanam dalam halaman. Sintaks adalah seperti berikut:

border-top-style border-right-style Bolehkah saya menggunakan gaya sempadan yang berbeza untuk bahagian yang berbeza dari elemen? border-bottom-style border-left-style Ya, CSS membolehkan anda menggunakan gaya sempadan yang berbeza ke sisi yang berlainan dari elemen. Anda boleh menentukan gaya pada setiap sisi menggunakan sifat

,

,

, dan

. border-image-width

Bagaimana untuk mengawal saiz imej sempadan CSS?

harta boleh digunakan untuk mengawal saiz imej sempadan CSS. Harta ini menetapkan lebar imej sempadan dengan menentukan saiz kawasan sempadan. Anda boleh menentukan lebar dalam piksel atau sebagai peratusan kotak elemen.

linear-gradient Bolehkah saya menggunakan imej kecerunan sebagai sempadan dalam CSS? border-image

Ya, CSS membolehkan anda menggunakan imej kecerunan sebagai sempadan. Anda boleh membuat imej kecerunan menggunakan fungsi

dan kemudian menggunakannya sebagai imej sempadan menggunakan harta .

bagaimana membuat gambar sempadan CSS saya berulang? border-image-repeat stretch atribut repeat dalam CSS mengawal bagaimana imej sempadan diulang. Nilai yang mungkin adalah round (lalai), space, stretch, dan repeat. round Skala imej untuk mengisi kawasan tersebut. space Imej jubin.

jubin imej, tetapi skala untuk dipadankan dengan tepat.

jubin imej, tetapi biarkan ruang di antara jubin. border Apakah perbezaan antara atribut border-image dan atribut

dalam

CSS? border border-image atribut

dalam CSS digunakan untuk menetapkan gaya, lebar, dan warna sempadan elemen. Sebaliknya, harta membolehkan anda menggunakan imej sebagai sempadan di sekeliling elemen. <🎜>

Bolehkah saya menggunakan imej sempadan CSS dengan sudut bulat?

Ya, anda boleh menggunakan imej sempadan CSS dengan sudut bulat. Anda boleh membuat sudut bulat menggunakan harta border-radius, dan kemudian gunakan imej sempadan menggunakan harta border-image.

Bagaimana untuk membuat sempadan bertitik di CSS?

sempadan putus -putus boleh dibuat dalam CSS menggunakan gaya sempadan dashed. Sintaks adalah seperti berikut:

element {
  border-image-source: url('myimage.png');
}

Ini akan mewujudkan sempadan dengan siri garis pendek atau garis putus -putus.

Atas ialah kandungan terperinci Menghias web dengan gambar sempadan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!