Prinsip implementasi:
Efek ini sebenarnya adalah varian yang saya terapkan di Bab 2. Mari kita bicara tentang kode kunci utama.
Perubahan utama adalah posisi gambar latar belakang, namun kali ini sedikit berbeda dengan yang ada di Bab 2. Kali ini Anda perlu memperhitungkan perubahan pada dua sudut membulat di bawah.
Mari kita lihat dulu penerapan kedua sudut membulat di atas:
/*Posisi offset gambar--bagian atas*/
.sharp b.b2{posisi latar belakang:-4px atas;}
.sharp b.b3{posisi latar belakang:-2px -1px;}
.sharp b.b4{posisi latar belakang:-1px -2px;}
Mari kita lihat pengaturan gaya sudut membulat kedua emotikon QQ di bawah ini.
/*Posisi offset gambar--bagian bawah*/
.sharp b.b7{posisi latar belakang:-4px bawah;}
.sharp b.b6{posisi latar belakang:-2px bawah;}
.sharp b.b5{posisi latar belakang:-1px bawah;}
Gaya pemanggilan gambar yang berbeda:
/*Skema warna satu, gaya hijau----------------------------------------*/
/*Warna tepian*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{latar belakang:#262626;}
/*Jalur gambar*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{latar belakang:url(gambar/1.jpg) tidak -mengulang;}
Dua kalimat pertama bersama-sama membentuk nilai warna kotak pembatas, yang perlu disetel ke nilai warna yang sama. Kalimat berikut menetapkan jalur pemanggilan gambar.
Hanya tiga kalimat untuk mendapatkan skema warna.