في هذا الدرس 3تصفّح المواضيع
تستخدم خاصية border-image في لغة CSS لإضافة إطار صورة بدلاً من الإطارات الألوان حول العنصر وهي إختصار لمجموعة خصائص وهم:
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
قيم خاصية border-image في لغة CSS:
- source slice width outset repeat وهي تحديد قيم الخصائص السابقة.
ترتيب القيم:
- source: رابط الصورة.
- slice تحديد من أين يتم قطع الصورة.
- width عرض الإطار.
- outset بعد الإطار نسبة للمحتوى الداخلي للعنصر.
- repeat تكرار إطار الصوره.
CSS border-image syntac
طريقة كتابة خاصية border-image في لغة CSS.
border-image:value;CSS border-image values
قيم خاصية border-image في لغة CSS.
border-image:source slice width outset repeat|initial|inherit;لكي تضيف صورة لإطار أي عنصر في لغة CSS يجب إضافة ثلاثة قيم:
- تحديد الصورة التي سوف يتم وضعها للإطار.
- تحديد مكان تقطيع الصورة حتى يتم عرضها بشكل مختلف.
- تحديد تكرار الأجزاء الوسطى او سوف يتم إطالتها.
توضيح: تأخذ خاصية border-image الصورة وتقسيمها إلى تسعة أقسام ثم يضع الزوايا في الزوايا ، وتتكرر الأقسام الوسطى أو تتمدد حسب ما تحدده.
أحفظ الصورة
CSS use border image round
طريقة إستخدام border-image في لغة CSS.
p
{
border: 10px solid transparent;
padding: 15px;
border-image: url(https://www.closetag.com/images/border-image.png) 30 round;
}CSS use border image 40 round
طريقة إستخدام border-image في لغة CSS.
p
{
border: 10px solid transparent;
padding: 15px;
border-image: url(https://www.closetag.com/images/border-image.png) 30 round;
}CSS use border image 50 round
طريقة إستخدام border-image في لغة CSS.
p
{
border: 10px solid transparent;
padding: 15px;
border-image: url(https://www.closetag.com/images/border-image.png) 30 round;
}هناك قيمة تسمي different slice وهي العنصر الخاص بالتحكم في شكل الاطار وعلي اختلاف قيمة هذا العنصر يختلف شكل الاطار كما في الامثلة التالية
CSS use border image round percentage
طريقة استخدام border-image في لغة CSS.
p
{
border: 10px solid transparent;
padding: 15px;
border-image: url(https://www.closetag.com/images/border-image.png) 20% round;
}CSS use border image round 30 percentage
طريقة استخدام border-image في لغة CSS.
p
{
border: 10px solid transparent;
padding: 15px;
border-image: url(https://www.closetag.com/images/border-image.png) 30% round;
}CSS use border image round 50 percentage
طريقة استخدام border-image في لغة CSS.
p
{
border: 10px solid transparent;
padding: 15px;
border-image: url(https://www.closetag.com/images/border-image.png) 50% round;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات6
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Border حد
- للمراجعة
- 02 Images صور
- للمراجعة
- 03 Property خاصية
- للمراجعة
- 04 Values قيم
- للمراجعة
- 05 Slice قطعة
- للمراجعة
- 06 Different مختلف
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.