หลักการดำเนินการ:
เอฟเฟกต์นี้เป็นตัวแปรที่ฉันใช้ในบทที่ 2 เรามาพูดถึงรหัสคีย์หลักกันดีกว่า
การเปลี่ยนแปลงหลักคือการวางตำแหน่งของภาพพื้นหลัง แต่คราวนี้จะแตกต่างจากในบทที่ 2 เล็กน้อย คราวนี้คุณจะต้องคำนึงถึงการเปลี่ยนแปลงในมุมโค้งมนทั้งสองด้านล่างด้วย
ขั้นแรกเรามาดูการใช้งานมุมโค้งมนทั้งสองด้านบนกันก่อน:
/*การวางตำแหน่งชดเชยภาพ--ส่วนบน*/
.sharp b.b2{ตำแหน่งพื้นหลัง:-4px ด้านบน;}
.sharp b.b3{ตำแหน่งพื้นหลัง:-2px -1px;}
.sharp b.b4{ตำแหน่งพื้นหลัง:-1px -2px;}
มาดูการตั้งค่าสไตล์ของมุมโค้งมนของอีโมติคอน QQ ทั้งสองด้านล่างกัน
/*ตำแหน่งชดเชยภาพ--ส่วนล่าง*/
.sharp b.b7{ตำแหน่งพื้นหลัง: -4px ด้านล่าง;}
.sharp b.b6{ตำแหน่งพื้นหลัง: -2px ด้านล่าง;}
.sharp b.b5{ตำแหน่งพื้นหลัง: -1px ด้านล่าง;}
สไตล์การเรียกรูปภาพที่แตกต่างกัน:
/*โทนสีที่ 1 แบบสีเขียว -----------------------------------------------*/
/*สีขอบ*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{สีเส้นขอบ:#262626;}
.color1 .b1,.color1 .b8{พื้นหลัง:#262626;}
/*เส้นทางรูปภาพ*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{พื้นหลัง:url(image/1.jpg) ไม่ -ทำซ้ำ;}
สองประโยคแรกรวมกันเป็นค่าสีของกล่องเส้นขอบ ซึ่งจำเป็นต้องตั้งค่าเป็นค่าสีเดียวกัน ประโยคต่อไปนี้จะกำหนดเส้นทางการเรียกรูปภาพ
เพียงสามประโยคเพื่อให้ได้โทนสี