باستخدام خاصية border-radius في CSS3، يمكنك إنشاء "زوايا مستديرة" لأي عنصر. باستخدام خاصية border-radius، يمكنك استخدام القواعد التالية:
(1) أربع قيم: القيمة الأولى هي الزاوية اليسرى العليا، والقيمة الثانية هي الزاوية اليمنى العليا، والقيمة الثالثة هي الزاوية اليمنى السفلى، والقيمة الرابعة هي الزاوية اليسرى السفلى (2) ثلاث قيم: الأولى القيمة هي الزاوية اليسرى العليا، القيمة الثانية هي الزاوية اليمنى العليا والزاوية اليسرى السفلى، القيمة الثالثة هي الزاوية اليمنى السفلى (3) قيمتان: القيمة الأولى هي الزاوية اليسرى العليا والزاوية اليمنى السفلية، القيمة الثانية هي الزاوية اليمنى العليا والزاوية اليسرى السفلية (4) قيمة واحدة: قيم الشرائح الأربعة هي نفسها
إذا كنت تريد أن يكون للرسومات تأثير زاوية مستديرة، فأنت تحتاج فقط إلى إضافة سمة واحدة، وهي سمة نصف القطر الحدودي. إذا كنت تريد أن تكون مستديرة جدًا، فقم بزيادة هذه القيمة.
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<العنوان>الصفحة الرئيسية</title>
<نمط>
شعبة {
العرض: 100 بكسل؛
الارتفاع: 100 بكسل؛
لون الخلفية: rgb(151, 26, 49);
نصف قطر الحدود: 10 بكسل؛
}
إم جي {
العرض: 100 بكسل؛
الارتفاع: 100 بكسل؛
نصف قطر الحدود: 10 بكسل؛
}
</نمط>
</الرأس>
<الجسم>
<ديف>
<img src="../vue/1.jpg">
</div>
</الجسم>
</html>إذا كنت تريد أن تكون مستديرة، فقط اكتب 100%.
تأثير الظل مربع الظل
الهامش: 0 تلقائي: ليست هناك حاجة للتحكم في الجزء العلوي والسفلي. يسمح Auto بتوزيع المساحات اليمنى واليسرى بالتساوي، ثم يضع الصندوق في المنتصف. إن السماح بتوزيع الفجوات بين المسافات اليسرى واليمنى بالتساوي هو ما يفعله تلقائي.
0 يعني عدم وجود ظل في الاتجاه الأفقي، والثاني 0 يعني عدم وجود ظل في الاتجاه الرأسي، والثالث هو طمس الظل.
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<العنوان>الصفحة الرئيسية</title>
<link href="" type="text/css" rel="stylesheet"/>
<نمط النوع = "نص/CSS">
شعبة {
العرض: 500 بكسل؛
الارتفاع: 500 بكسل؛
لون الخلفية: أخضر أصفر؛
الهامش: 0 تلقائي؛
ظل الصندوق: 0 0 50px rgba(0, 0, 0, 0.5);
}
</نمط>
</الرأس>
<الجسم>
<div class="d1">
</div>
</الجسم>
</html>بهذا نختتم هذه المقالة حول ميزات CSS3 الجديدة وتأثير الظل المربع ونصف القطر الدائري لمزيد من المعلومات حول ميزة CSS3 الجديدة للظل المربع، يرجى البحث في المقالات السابقة على موقع downcodes.com أو متابعة التصفح أدناه، كما آمل سوف تدعم downcodes.com أكثر في المستقبل!