Saat membuat halaman web, penggunaan tag untuk tampilan rahasia sangat populer. Tag sudut membulat memiliki kelebihan berupa gaya yang indah dan ekspresi yang jelas. Umumnya, kami akan membuat latar belakang tag sudut membulat menjadi sebuah gambar ini adalah Jika jumlah kata dalam teks label berubah (seperti yang ditunjukkan pada Gambar 1), gambar latar belakang tetap tidak dapat diperluas. Dengan cara ini, kita perlu membuat banyak gambar latar belakang dengan lebar berbeda, yang sangat merepotkan. Berikut dua cara membuat label sudut membulat yang dapat diperluas.
Gambar 1
Label bulat coretan
Seperti yang ditunjukkan pada Gambar 1, tepi label yang membulat berbeda dengan warna latar belakang. Pertama, kita perlu membuat gambar latar belakang di Photoshop (Gambar 2). tingginya setidaknya sama dengan label sebenarnya. Tinggi, tepi diatur ke warna guratan, dan bagian dalamnya transparan, tetapi area di luar sudut membulat tidak dapat diatur menjadi transparan dan harus diisi dengan warna latar belakang halaman. Di sini, warna putih digunakan, dan kami beri nama tab_bg.gif.
Gambar 2
Kodenya adalah sebagai berikut:
| Berikut kutipannya: <gaya tipe="teks/css"> a.tab{ float:kiri; margin:10px; padding-kanan:10px; latar belakang:#4B90C6 url(tab_bg.gif) kanan atas tanpa pengulangan; a.tab span{ padding-kiri:10px; latar belakang:url(tab_bg.gif) tanpa pengulangan; </gaya> <tubuh bgcolor="#FFFFFF"> <a href="#" class="tab"><span>Beranda</span></a> <a href="#" class="tab"><span>Profil</span></a> <a href="#" class="tab"><span>Buku Tamu</span></a> </tubuh> |
Deskripsi kode:
1. Ide implementasinya adalah menyetel latar belakang kanan label untuk tag <a>, dan menyetel latar belakang kiri label untuk tag <span> guna mewujudkan perluasan label sudut membulat;
2. Metode ini hanya memerlukan pengunduhan gambar latar belakang, yang memecahkan masalah tampilan latar belakang yang tidak sinkron di kedua sisi label, namun jika jumlah kata dalam label melebihi lebar gambar latar belakang, masalah akan terjadi terjadi (seperti yang ditunjukkan pada Gambar 3), jadi saat membuat gambar latar belakang, lebar gambar harus memperhitungkan lebar karakter terpanjang sebanyak mungkin.
Gambar 3
Label sudut membulat warna solid
Dalam kasus di atas, karena efek guratan perlu dicapai, teks hanya dapat diperluas sesuai lebar latar belakang, yang memiliki batasan tertentu. Jika labelnya berupa label sudut membulat satu warna, label tersebut dapat diperluas sepenuhnya (Gambar 4).
Gambar 4
Potong sisi kiri dan kanan gambar latar belakang yang digunakan pertama kali menjadi gambar latar belakang masing-masing (seperti yang ditunjukkan pada Gambar 5), dan beri nama tab_left.gif dan tab_right.gif.
Gambar 5
Kodenya adalah sebagai berikut:
| Berikut kutipannya: <gaya tipe="teks/css"> a.tab{ float:kiri; margin:10px; padding-kanan:10px; latar belakang:#033EA5 url(tab_right.gif) kanan atas tanpa pengulangan; font:tebal 14px/30px 'Verdana'; a.tab span{ padding-kiri:10px; latar belakang:url(tab_left.gif) tanpa pengulangan tampilan:blok;} </gaya> <tubuh bgcolor="#FFFFFF"> <a href="#" class="tab"><span>Beranda</span></a> <a href="#" class="tab"><span>Profil</span></a> <a href="#" class="tab"><span>Buku Tamu</span></a> </tubuh> |
Deskripsi kode:
1. Gunakan latar belakang yang berbeda untuk <a> dan <span>, dan atur warna latar belakang tautan ke warna guratan untuk mendapatkan efek label monokrom;
2. Metode ini dapat mencapai efek ekspansi yang sewenang-wenang.