صور CSS3 الحدود
مع CSS3 border-image الملكية، يمكنك تعيين صورة لاستخدامها الحدود حول عنصر.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-, -moz- ، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
CSS3 border-image الملكية
وCSS3 border-image الخاصية تسمح لك بتحديد صورة لاستخدامها بدلا من الحدود العادي حول عنصر.
تقدم هذه المنشأة الفندقية ثلاثة أجزاء:
- صورة لاستخدام مثل الحدود
- حيث لشريحة صورة
- تحديد ما إذا كانت الأجزاء الوسطى وينبغي تكرار أو تمدد
سوف نستخدم الصورة التالية (وتسمى "/css/border.png"):
على border-image الملكية يأخذ صورة وشرائح أنه في تسعة أقسام، مثل لوحة تيك تاك تو. ومن ثم يضع زوايا في الزوايا، ويتم تكرار المقاطع المتوسطة أو تمدد كما تحدده.
ملاحظة: للحصول على border-image للعمل، يحتاج العنصر أيضا border مجموعة الخاصية!
هنا، يتم تكرار الاوسط واجزاء من الصورة لخلق الحدود:
صورة كحدود!
هنا هو رمز:
مثال
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 round; /* Opera 11-12.1 */
border-image: url(border.png)
30 round;
}
انها محاولة لنفسك » هنا، وامتدت الأقسام الوسطى من الصورة لخلق الحدود:
صورة كحدود!
هنا هو رمز:
مثال
#borderimg
{
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30 stretch; /* Opera 11-12.1 */
border-image: url(border.png)
30 stretch;
}
انها محاولة لنفسك »  | نصيحة: إن border-image الملكية هو في الواقع الخاصية المختصرة ل border-image-source ، border-image-slice ، border-image-width ، border-image-outset و border-image-repeat خصائص. |
|---|
CSS3 الحدود صورة - القيم شريحة مختلفة
القيم شريحة مختلفة تماما يتغير مظهر الحدود:
مثال 1:
border-image: url(border.png) 50 جولة.
مثال 2:
border-image: url(border.png) الجولة 20٪.
مثال 3:
border-image: url(border.png) 30٪ مستديرة.
هنا هو رمز:
مثال
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
50 round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
50 round; /* Opera 11-12.1 */
border-image: url(border.png)
50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png)
30% round; /* Safari 3.1-5 */
-o-border-image: url(border.png)
30% round; /* Opera 11-12.1 */
border-image: url(border.png)
30% round;
} انها محاولة لنفسك » اختبر نفسك مع تمارين!
خصائص الحدود CSS3
| الملكية | وصف |
|---|---|
| border-image | خاصية الاختزال لوضع جميع border-image-* خصائص |
| border-image-source | وتحدد المسار إلى صورة لاستخدامها الحدود |
| border-image-slice | تحدد كيفية شريحة الصورة الحدود |
| border-image-width | يحدد بعرض الصورة الحدود |
| border-image-outset | يحدد المبلغ الذي يمتد على مساحة الصورة الحدود خارج مربع الحدود |
| border-image-repeat | يحدد ما إذا كانت الصورة الحدود ينبغي أن يتكرر، تقريب أو تمدد |