في عملية إنشاء صفحات الويب، قد نحتاج أحيانًا إلى تحقيق تأثير الزوايا الدائرية. كانت الطريقة السابقة هي قص مسودة التصميم إلى صور يمكن تحويلها بسهولة إلى صفحات واستخدام صور خلفية متعددة لتحقيق زوايا مستديرة. بعد ظهور CSS3، ليست هناك حاجة لمثل هذه المشكلة، حيث يوفر CSS3 سلسلة من الخصائص لضبط تأثير الزاوية المستديرة للعناصر، كما هو موضح أدناه:
القيم الاختيارية للوظائف المذكورة أعلاه موضحة في الجدول التالي:
يستخدم نصف القطر الحدودي لتنفيذ الحدود المستديرة.
مثال:
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></ الجسم></html>نتائج التشغيل:
ولكن إذا قمت بتعيين نصف قطر الحدود إلى 150 بكسل، فسوف تصبح حدودًا دائرية
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></ الجسم></html>نتائج التشغيل:
للراحة، ما عليك سوى ضبط نصف قطر الحدود على 50%. التأثير هو نفسه.
لكن إذا أردت رسم دائرة، يجب أن يكون العرض والارتفاع متساويين.
في الواقع، يمكن ربط قيم سمات متعددة بعد نصف القطر الحدودي بالنسبة لقيمة سمة مثل تلك المذكورة أعلاه، فستكون الزوايا الأربع افتراضية لقيمة السمة هذه إذا كانت قيم السمات الأربع مرتبطة بشكل واضح بالزوايا الأربع. ما هي الطريقة النسبية؟ بدءا من الزاوية اليسرى العليا والذهاب في اتجاه عقارب الساعة.
مثال:
<html><head><style>div{width:300px;height:300px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:50px0px20px100px;</style></head><body><div </div></body></html>نتائج التشغيل:
على سبيل المثال، لنرسم بيضة:
<html><head><style>div{width:80px;height:100px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;</style></head><body> <div></div></body></html>نتائج التشغيل:
