حافات CSS3 (Border)

باستخدام CSS3، يمكنك تطبيق الصور على حواف العناصر.

استخدام حواف CSS3

CSS3 يقدمان خصائص جديدة لتحديد نماذج الحواف بشكل أكثر جاذبية - يتم استخدام border-image لدمج الصور في نماذج الحواف، وborder-radius لإنشاء زوايا دائرية دون استخدام أي صور.

القسم التالي سيقوم بشرح هذه الخاصيات الجديدة للحدود في CSS3، للحصول على معلومات أخرى تتعلق بالحدود، يرجى الرجوع.حافات CSSدليل.

إنشاء زوايا دائرية CSS3

يمكن استخدام خاصية border-radius لإنشاء زوايا دائرية. عادةً، يتم تعريف شكل الزوايا الخارجية للحدود. قبل CSS3، تم استخدام صور التقطيع لإنشاء زوايا دائرية معقدة.

.box {
　　　　width: 300px;
　　　　height: 150px;
　　　　background: #ffb6c1;
　　　　border: 2px solid #f08080;
　　　　border-radius: 20px;
}

إضافة صورة حافات CSS3

سماح خاصية border-image لتعيين الصورة لتكون حافات العنصر.
تصميم الحافات يتم إنشاؤه من الجانب وال زوايا الصورة المحددة في URL مصدر صورة الحافات. يمكن تقسيم صورة الحافات بطرق متعددة، مثل التقطيع، التكرار، التكبير والتوسع لتناسب حجم منطقة الحافات.

.box {
　　　　width: 300px;
　　　　height: 150px;
　　　　border: 15px solid transparent;
　　　　-webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
　　　　-o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
　　　　border-image: url("border.png") 30 30 round;
}