Gambar CSS3 Sempadan-Imej Membuat Gambar Sangat Suka!
Mencipta sempadan bukan sesuatu yang baru HTML & CSS; kami telah dapat menambah sempadan sejak awal. Anda mungkin sudah biasa dengan sempadan pepejal, sempadan putus-putus, sempadan putus-putus dan sebagainya.
Tetapi, dengan sifat imej sempadan CSS3 yang baharu, mewujudkan sempadan pada elemen HTML menjadi lebih maju; dengan baik, hanya meletakkan, kita kini dapat menambah sempadan menggunakan imej sebagai sumber yang akan membolehkan kita menambah sempadan yang lebih menarik. Baiklah, sekarang mari kita lihat bagaimana harta ini berfungsi.
Sokongan Sintaks dan Penyemak Imbas
Imej sempadan dalam CSS3 ditakrifkan menggunakan sintaks tersingkat berikut:
border-image: [source image] [slice] [width] [outset] [repeat];
Sintaks di atas adalah versi rasmi dari W3C yang hanya disokong dalam Chrome, manakala Opera, Firefox, dan Safari masih memerlukan versi awalan (-o-, -moz-, -webkit-), dan Internet Explorer tidak menghairankan tidak menyokong harta ini.
Tambahan pula, [lebar] dan juga [awal] nilai ini imej sempadan harta tidak lagi disokong dalam mana-mana pelayar, namun, nilai lebar boleh diganti dengan menggunakan lebar sempadan harta.
Jadi, secara ringkas, buat masa ini kita hanya boleh menggunakan nilai [sumber imej], [kepingan] dan [ulangi] .
border-image: [source image] [slice] [repeat];
Slice Image
Sebelum kita meneruskan untuk menunjukkan harta ini, mari kita bercakap tentang “kepingan imej” pertama kerana ia adalah sesuatu yang baru dalam mengisytiharkan harta. Skrin imej di sini akan menentukan potongan imej yang masing-masing mengambil titik permulaan dari bahagian atas, kanan, bawah, dan kiri tepi imej yang kemudiannya akan membahagikan imej itu kepada sembilan bahagian, seperti yang digambarkan dengan imej berikut.
Dalam imej di atas, anda akan melihat bahagian tersebut 1, 3, 7 dan 9 akan menjadi sudut sempadan, dan bahagian-bahagiannya 2, 4, 6 dan 8 akan menjadi pinggir atau garisan sempadan, memastikan bahawa bahagian di mana ia akan menjadi kelebihannya boleh diulang atau diperbaharui.
Nilai keping boleh diisytiharkan dengan a piksel unit atau peratusan (%) unit untuk pengukuran yang fleksibel.
lebih banyak rujukan:
- Latar Belakang CSS dan Sempadan Tahap 3
Membuat Frame Photo
Sekarang, mari kita tunjukkan harta itu dalam contoh sebenar.
Kali ini, kami akan melaksanakannya imej sempadan harta untuk membuat bingkai foto dan kami akan menggunakan imej di bawah sebagai sumber. Kami telah mengukur imej dengan teliti supaya ia boleh dihiris, diulang dan diregangkan dengan betul tanpa mengira lebar kandungan dan ketinggiannya.
Catatan: anda boleh memuat turun imej di atas dari pautan ini.
Juga, dalam demonstrasi ini kami akan menggunakan Cinemagraph yang menakjubkan ini oleh From Me to You sebagai foto.
(Sumber imej: Dari Saya Kepada Anda)
Markup
Penanda adalah semudah ini:
Jangan lupa untuk menggantikannya images_2 / css3-border-image-property-making-photos-really-cool_3.jpg dengan foto anda sendiri.
Gaya
Dan kemudian, mari kita bingkai menggunakannya imej sempadan.
Jika anda melihat imej di atas, lebar imej kami 180px dalam jumlah. Nilai ini kemudiannya boleh dibahagikan kepada 6 yang setiap bahagiannya menjadi 30px; dan jadi kami akan memotong imej untuk 30px.
Jika anda menggunakan nilai panjang untuk slice, anda harus mengecualikannya px unit, kerana ia akan diterjemahkan secara automatik ke piksel, tetapi jika anda memutuskan untuk menggunakan peratusan, anda masih perlu menambah (%).
Bagi pengulangan imej, kami akan menggunakan lalai; ulangi. Sebagai alternatif, anda boleh menggunakannya regangan dan jangan bimbang, imej sempadan masih akan kelihatan anggun.
img border-image: url ("images / frame.png") 30 ulangi; -o-border-image: url ("images / frame.png") 30 ulang; -moz-border-image: url ("images / frame.png") 30 ulangi; -webkit-border-image: url ("images / frame.png") 30 ulang; lebar sempadan: 30px; Di samping itu, kami juga ingin meletakkan imej di tengah-tengah tetingkap penyemak imbas serta menambahkan tekstur latar belakang kepada dokumen untuk menjadikannya lebih menarik.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; ketinggian: 476px; lebar: 675px; teks-align: center; Baiklah, saya fikir kita sudah selesai di sini, sekarang mari lihatnya dalam pelayar.
- Demo
- Muat turun Sumber
Adakah anda merasa seperti anda melihat lukisan ajaib di Hogwarts?
Pemikiran akhir
Ini imej sempadan tidak syak lagi adalah tambahan yang bagus dalam keluarga CSS3; kita tidak lagi terhad kepada sempadan biasa.
Dan dalam siaran ini, kami telah menunjukkan kepada anda bagaimana kami boleh membuat bingkai imej tanpa bimbang tentang kandungan atau dalam kes ini dimensi foto (lebar & ketinggian). Ketinggian dan lebar boleh menjadi fleksibel, selagi sumber sempadan boleh diulang atau boleh diperbaharui.
Akhir sekali, jika anda masih agak hairan imej sempadan, terdapat alat yang boleh anda gunakan untuk membantu anda membuatnya lebih mudah: alat imej sempadan
