تقريب CSS3 زوايا
تقريب CSS3 زوايا
استخدام CSS3 ممتلكات نصف قطرها الحدود، يمكنك أن تجعل أي عنصر "الزاوية".
دعم المتصفح
الأرقام الواردة في الجدول تمثل أول متصفح لدعم رقم الإصدار الممتلكات.
-webkit- أو أعربت الأرقام السابقة -moz- دعم النسخة الأولى من البادئة.
| 属性 | |||||
|---|---|---|---|---|---|
| border-radius | 9.0 | 5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 ممتلكات نصف قطرها الحدود
استخدام CSS3 ممتلكات نصف قطرها الحدود، يمكنك أن تجعل أي عنصر "الزاوية".
الأمثلة الثلاثة التالية:
1. تحديد لون خلفية عنصر مدورة:
فيليه!
2. تحديد شرائح عنصر الحدود:
فيليه!
3. تحديد شرائح عناصر الصورة الخلفية:
فيليه!
متاحة على النحو التالي:
أمثلة
الحدود بين دائرة نصف قطرها: 25px؛
خلفية: # 8AC007.
الحشو: 20px؛
العرض: 200px؛
الطول: 150px؛
}
# rcorners2 {
الحدود بين دائرة نصف قطرها: 25px؛
الحدود: 2px الصلبة # 8AC007.
الحشو: 20px؛
العرض: 200px؛
الطول: 150px؛
}
# rcorners3 {
الحدود بين دائرة نصف قطرها: 25px؛
خلفية: رابط (paper.gif)؛
خلفية موقف: تركت أعلى.
الخلفية تكرار: تكرار.
الحشو: 20px؛
العرض: 200px؛
الطول: 150px؛
}
محاولة »
CSS3 الحدود بين نصف قطر - يحدد كل شرائح
إذا قمت بتحديد قيمة واحدة فقط في الملكية دائرة نصف قطرها الحدود، ثم فإنه سيتم إنشاء أربع شرائح.
ولكن إذا كنت ترغب في تحديد أحد عشر في الزوايا الأربع، يمكنك استخدام القواعد التالية:
- أربع قيم: أعلى الزاوية اليسرى من القيمة الأولى والقيمة الثانية هي الزاوية اليمنى العليا، في الزاوية اليمنى السفلى هي الثالثة، والرابع هو أسفل الزاوية اليسرى.
- ثلاث قيم: أعلى الزاوية اليسرى من القيمة الأولى والقيمة الثانية هي اعلى اليمين واليسار السفلي، الزاوية اليمنى السفلى من القيمة الثالثة
- قيمتين: الأول هو الجزء العلوي الأيسر وأسفل الزاوية اليمنى، والثاني هو الزاوية اليمنى العليا والزاوية اليسرى السفلى
- قيمة: أربعة نفس قيمة مدورة
الأمثلة الثلاثة التالية:
1. القيم الأربع - الحدود نصف قطرها: 15px 50px 30px 5px:
2. القيم الثلاث - الحدود نصف قطرها: 15px 50px 30px:
3. القيمتين - الحدود نصف قطرها: 15px 50px:
ما يلي هو رمز المصدر:
أمثلة
الحدود بين دائرة نصف قطرها: 15px 50px 30px 5px ؛
خلفية: # 8AC007.
الحشو: 20px؛
العرض: 200px؛
الطول: 150px؛
}
# rcorners5 {
الحدود بين دائرة نصف قطرها: 15px 50px 30px؛
خلفية: # 8AC007.
الحشو: 20px؛
العرض: 200px؛
الطول: 150px؛
}
# rcorners6 {
الحدود بين دائرة نصف قطرها: 15px 50px؛
خلفية: # 8AC007.
الحشو: 20px؛
العرض: 200px؛
الطول: 150px؛
}
محاولة »
يمكنك أيضا إنشاء ركن بيضاوي الشكل:
أمثلة
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
محاولة »
تقريب CSS3 الملكية زوايا
| ممتلكات | وصف |
|---|---|
| الحدود بين دائرة نصف قطرها | جميع الزوايا الأربع من الحدود - * - * - خصائص دائرة نصف قطرها المختصرات |
| أعلى الحد من اليسار دائرة نصف قطرها | ويعرف الزاوية اليسرى العليا من قوس |
| أعلى الحد من اليمين دائرة نصف قطرها | ويعرف الزاوية اليمنى العليا من راديان |
| الحدود من الأسفل من اليمين دائرة نصف قطرها | ويعرف قوس الزاوية اليمنى السفلى |
| الحدود أسفل يسار نصف قطرها | ويعرف الزاوية اليسرى السفلى من القوس |