مبدأ التنفيذ:
هذا التأثير هو في الواقع البديل الذي قمت بتطبيقه في الفصل الثاني. دعونا نتحدث عن رموز المفاتيح الرئيسية.
التغيير الرئيسي هو موضع صورة الخلفية، ولكن هذه المرة يختلف قليلاً عن ذلك الموجود في الفصل 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 أسفل؛}
أنماط مختلفة لاستدعاء الصور:
/*نظام الألوان الأول، النمط الأخضر----------------------------------------*/
/*لون الحدود*/
.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{background:url(image/1.jpg) لا -يكرر؛}
تشكل الجملتان الأوليتان معًا قيمة اللون لمربع الحدود، والتي يجب ضبطها على نفس قيمة اللون. الجملة التالية تحدد مسار استدعاء الصورة.
ثلاث جمل فقط للحصول على نظام الألوان.