إدراج نصف قطر الحدود مع CSS3

في CSS3، يمكن تحقيق نصف قطر الحدود الداخلي، حيث تكون الزوايا منحنية إلى الداخل بدلاً من الخارج، يكون تحديا دون استخدام الصور. ومع ذلك، هناك حل ذكي يستخدم تدرجات CSS3.

يتضمن نهج Lea Verou المبتكر إنشاء سلسلة من التدرجات الشفافة ذات المنحنيات، مما يخلق وهم نصف قطر الحدود الداخلي. من خلال وضع هذه التدرجات بدقة، يمكنك تحقيق تأثير الزوايا الدائرية المرغوب فيه.

يحدد كود CSS الخاص بها، كما هو موضح أدناه، فئة مخصصة لعنصر بنصف قطر الحدود الداخلي المطلوب:

شعبة جولة { خلفية: -moz-radial-gradient(0 100%، دائرة، rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(100% 100%, دائرة, rgba(204,0,0,0) 14 بكسل, #c00 15 بكسل), -moz-radial-gradient(100% 0, دائرة, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(0 0, Circle, rgba(204,0,0,0) 14px, #c00 15px); خلفية: -o-شعاعي-التدرج(0 100%، دائرة، rgba(204,0,0,0) 14 بكسل, #c00 15 بكسل), -التدرج الشعاعي (100% 100%، دائرة، rgba(204,0,0,0) 14 بكسل, #c00 15 بكسل), -o-شعاعي التدرج(100% 0, دائرة, rgba(204,0,0,0) 14px, #c00 15px), -o-radial-gradient(0 0, Circle, rgba(204,0,0,0) 14px, #c00 15px); خلفية: -webkit-radial-gradient(0 100%, دائرة, rgba(204,0,0,0) 14 بكسل, #c00 15 بكسل), -webkit-radial-gradient(100% 100%, دائرة, rgba(204,0,0,0) 14 بكسل, #c00 15 بكسل), -webkit-radial-gradient(100% 0, دائرة, rgba(204,0,0,0) 14px, #c00 15px), -webkit-radial-gradient(0 0, Circle, rgba(204,0,0,0) 14px, #c00 15px); موضع الخلفية: أسفل اليسار، أسفل اليمين، أعلى اليمين، أعلى اليسار؛ -حجم الخلفية: 50% 50%؛ -حجم خلفية مجموعة الويب: 50% 50%؛ حجم الخلفية: 50% 50%؛ تكرار الخلفية: عدم التكرار؛

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

سيؤدي تطبيق هذه الفئة على عنصر إلى ظهور عنصر بنصف قطر حدود داخلي. من المهم ملاحظة أن هذه التقنية تعتمد على دعم rgba والتدرجات، مما يجعلها استراتيجية تحسين تقدمية. بالنسبة للمتصفحات القديمة أو المتصفحات التي لا تدعم التدرجات، يوصى باستخدام خيار احتياطي يعتمد على الصور لتوفير الدعم.