في المقالة السابقة، استخدمنا صورة ذات تدرج لأعلى ولأسفل كخلفية للعنوان وقمنا بتطبيق تأثير زاوية مستديرة عليها. هل صحيح أن هذا النوع من إطار الزاوية المستديرة لا يمكن استخدامه إلا للصور الرتيبة نسبيًا؟ هل يمكننا أيضًا أن نجعل بعض الصور ذات الألوان الغنية شفافة ومستديرة؟
الجواب هو نعم، دعونا نلقي نظرة على الكونغ فو النهائي.
دعونا نلقي نظرة على الاداءات النهائية أولا : .jpg)
الشكل 1
كما ترى، هذه صورة مستديرة تم تحقيقها باستخدام CSS خالص، من أجل رؤية تأثير الشفافية، قمت بتطبيق صورة خلفية خصيصًا. يمكنك تنزيل هذا النموذج على جهاز الكمبيوتر الخاص بك وتغيير حجم النافذة كما تريد شفاف.
مع هذا التأثير، لم تعد هناك حاجة للقلق بشأن تقريب زوايا كل صورة. غالبًا ما يتم رؤية هذا التأثير في بعض الصفحات التجريبية المستندة إلى الصور، وهو مناسب بشكل خاص للقوائم التي تحتوي على الكثير من الصور. ماذا عن ذلك، التأثير ليس سيئا!
حسنًا، دعونا نلقي نظرة على آلية التنفيذ!
مبدأ التنفيذ:
هذا التأثير هو في الواقع البديل الذي قمت بتطبيقه في الفصل الثاني. دعونا نتحدث عن رموز المفاتيح الرئيسية.
التغيير الرئيسي هو موضع صورة الخلفية، ولكن هذه المرة يختلف قليلاً عن ذلك الموجود في الفصل 2. هذه المرة عليك أن تأخذ في الاعتبار التغييرات في الزاويتين الدائريتين أدناه.
دعونا نلقي نظرة أولاً على تنفيذ الزاويتين الدائريتين أعلاه:
/*وضع إزاحة الصورة--الجزء العلوي*/
.sharp b.b2{الخلفية-الموضع:-4px أعلى؛}
.sharp b.b3{الخلفية-الموضع:-2px -1px;}
.sharp b.b4{الخلفية-الموضع:-1px -2px;}
انظر إلى إعدادات النمط للزاويتين الدائريتين أدناه، الجزء السفلي والجزء العلوي يتوافقان مع بعضهما البعض.
/*وضع إزاحة الصورة--الجزء السفلي*/
.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) no -يكرر؛}
تشكل الجملتان الأوليتان معًا قيمة اللون لمربع الحدود، والتي يجب ضبطها على نفس قيمة اللون. الجملة التالية تحدد مسار استدعاء الصورة.
ثلاث جمل فقط للحصول على نظام الألوان.