نتعلم اليوم استخدام تقنية CSS3 لتحقيق زوايا مستديرة دون الحاجة إلى صور. يمكننا استخدام CSS3 لتحقيق تأثير الزاوية المستديرة لخلفية عنوان الشريط الجانبي وتأثير الزاوية المستديرة لمربع البحث. قم بتسجيله لاستخدامه لاحقًا. قامت W3C منذ فترة طويلة بصياغة خاصية CSS3 التي تنفذ الزوايا الدائرية لـ CSS: Border-radius يقوم Firefox وSafari أيضًا بتنفيذ هذه الوظيفة من خلال الخصائص الخاصة:
<div style =" لون الخلفية: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px Solid #000; الحشو: 10px;" >يطبق Firefox وSafari زوايا مستديرة< / شعبة>
التأثير هو كما يلي:
من بينها، -moz-border-radius هي خاصية خاصة يستخدمها Firefox لتنفيذ الزوايا الدائرية، و-webkit-border-radius هي خاصية خاصة تستخدمها متصفحات webkit الأساسية (مثل Safari وChrome) لتنفيذ الزوايا الدائرية If ما عليك سوى تحديد زاوية معينة مستديرة، أما الزوايا فكلها تحدد أربع سمات:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
وبطبيعة الحال، لا يزال IE (بما في ذلك IE8) لا يدعمه، لذلك لا يمكن عرض التأثير إلا في Firefox وSafari وChrome.