CSS3 الحدود
CSS3 الحدود
مع CSS3، يمكنك إنشاء تدوير الزوايا، إضافة مربع الظل، وكصورة من الحدود دون استخدام برامج التصميم مثل فوتوشوب.
في هذا الفصل، وسوف تتعلم خصائص الحدود التالية:
- الحدود بين دائرة نصف قطرها
- مربع الظل
- الحدود بين صورة
تقريب CSS3 زوايا
إضافة شرائح صعبة في CSS2. كان علينا أن استخدام صورة مختلفة في كل زاوية.
في CSS3، فمن السهل جدا لخلق تدوير زوايا.
في CSS3 يستخدم ممتلكات نصف قطرها الحدود لخلق تدوير زوايا:
هذا يتم تقريب الحدود!
الظلال مربع CSS3
يتم استخدام الخاصية CSS3 مربع الظل لإضافة الظل:
صور الحدود CSS3
مع الخاصية CSS3 الحدود بين صورة، يمكنك استخدام صورة لخلق الحدود:
خاصية الحدود صورة يسمح لك لتحديد صورة كحدود! تستخدم لخلق الحدود فوق الصورة الأصلية:
استخدام الصور لإنشاء شعبة الحدود:
أمثلة
استخدام الصور لإنشاء شعبة الحدود
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
محاولة »
خصائص الحدود الجديدة
| ممتلكات | تفسير | CSS |
|---|---|---|
| الحدود بين صورة | إعداد خصائص الاختزال الحدود من جميع الصور. | 3 |
| الحدود بين دائرة نصف قطرها | واحدة لتحديد كل الحدود الأربعة - * - الملكية دائرة نصف قطرها الاختزال | 3 |
| مربع الظل | نعلق واحد أو أكثر من القائمة المنسدلة الظلال مربع | 3 |