يتم استخدام خاصية الحدود CSS لإنشاء حدود كائن ما، أي سمك الحدود ولونها ونمطها. تُستخدم هذه الخاصية على نطاق واسع في HTML. يمكنك إنشاء تأثيرات متنوعة لفهم المحتوى الموجود على الصفحة بشكل أفضل. على سبيل المثال، قم بتصميم شريط جانبي، أو رأس موقع ويب، أو قائمة، وما إلى ذلك.

1. بناء جملة الحدود CSS

حدود : عرض الحدود، نمط الحدود، لون الحدود | يرث;

• عرض الحدود - سمك الحدود. يمكنك ضبطه بالبكسل (px) أو استخدام القيم القياسية رفيعة ومتوسطة وسميكة (تختلف فقط في العرض بالبكسل)
• نمط الحدود - نمط الحدود المعروضة. يمكن أن تأخذ القيم التالية
  • لا شيء أو مخفي - يلغي الحدود
  • منقط - إطار منقط
  • متقطع - إطار مصنوع من شرطات
  • صلب - خط بسيط (في أغلب الأحيان)
  • مزدوج - إطار مزدوج
  • الأخدود - حدود ثلاثية الأبعاد محفورة
  • الحافة، الداخلية، البداية - تأثيرات إطار ثلاثية الأبعاد مختلفة
  • وراثة - يتم تطبيق قيمة العنصر الأصلي
• لون الحدود - لون الحدود. يمكن تحديده باستخدام اسم لون محدد أو بتنسيق RGB (راجع أسماء ألوان html للموقع)

ملحوظة

يمكن تعيين القيم الموجودة في خاصية حدود CSS بأي ترتيب. التسلسل الأكثر استخدامًا هو "لون نمط السُمك".

2. أمثلة ذات حدود CSS مختلفة

2.1. مثال. أنماط تصميم الحدود المختلفة على غرار الحدود

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "

letter-spacing line-height list-style margin max-height max-width min-height min-width outline overflow padding position right text-align text-decoration text-indent text-transform top vertical-align white-space width word-spacing z-index

Справочник HTML Уроки HTML Видеокурсы по созданию сайта

С войство BORDER

Свойство	Значения	Пр*	Нc*
border		+	-
border-width	[ thin, medium, thick, ШИРИНА ]{1,4}, inherit	+	-
border-style	[ none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset ]{1,4}, inherit	+	-
border-color	[ ЦВЕТ, transparent ]{1,4}, inherit	+	-
border-bottom border-left border-right border-top	[ border-width; border-style; border-color ], inherit	+	-
border-bottom-width border-left-width border-right-width border-top-width	thin, medium , thick, ШИРИНА, inherit	+	-
border-bottom-style border-left-style border-right-style border-top-style	none , hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit	+	-
border-bottom-color border-left-color border-right-color border-top-color	ЦВЕТ , transparent, inherit	+	-

Сокращенная форма задания отдельных свойств для определения ширины, стиля и цвета рамки элементов. При том, что значения этих свойств не являются обязательными, рамка будет отсутствовать, если не задано значение стиля рамки (оно по умолчанию: none ).

Применение:

p { border: 5px groove #00ff00;} — для абзаца задана рамка: шириной 5px, стиль groove , цвета лайм:

Border-width

Свойство задает ширину рамки элемента или отдельно для каждой её стороны, если стиль рамки отличен от none .

Значения:

Ширину можно указывать в разных единицах, удобнее в px. Одно значение задает ширину всей рамки. Два значения: 1-ое — для верхней и нижней рамок, 2-ое — для левой и правой. Три значения: 1-ое — для верхней, 2-ое — для левой и правой, 3-е — для нижней. Четыре значения установят ширину рамок в следующем порядке: верхняя, правая, нижняя, левая. Это — стандартный порядок в CSS.

thin — узкая.
medium — средняя.
thick — широкая.
inherit

Border-style

Свойство задает стиль рамки элемента или отдельно для каждой её стороны, его значение должно отличаться от none .

Значения:

none — нет, а ширина равна 0.
hidden — аналогично none , кроме применения к таблицам, где значение свойства Border-collapse равно collapse .
inherit — наследование от родительского элемента.

Допустимо использовать 1-4 значения — порядок применения, как для Border-width . Остальные значения лучше видны на картинке:

Border-color

Свойство задает цвет рамки элемента, либо различные цвета для её четырех сторон. Значение стиля должно отличаться от none и hidden .

Значения:

transparent — задает прозрачный цвет рамки.
inherit — наследование от родительского элемента.
Можно использовать 1-4 значения — порядок применения, как для Border-width .

Border-

Свойства задают ширину, стиль и цвет рамки элементов для определенной стороны.
Значения : как для свойства Border .

Border--width

Свойства задают ширину рамки элемента для определенной стороны.
Значения : как для свойства Border-width .

Border--style

Свойства задают стиль рамки элемента для определенной стороны.
Значения : как для свойства Border-style .

Border--color

Свойства задают цвет рамки элемента для определенной стороны.
Значения : как для свойства Border-color .

Это свойство создаёт границу вокруг элемента. Подробнее про это свойство вы можете прочитать по ссылке, а в этой статье я в общих чертах опишу как оно работает. Данной информации будет достаточно для того, чтобы понять, как делать рамки при помощии CSS.

Синтаксис свойства border прост: border: 1px solid black; . Это свойство имеет три значения:

• 1px - толщина границы.
• solid - тип рамки, solid - это сплошная линия, double - двойная сплошная, dashed - пунктиром. Есть ещё несколько типов рамок, информацию про них найдёте тут: CSS border .
• black - устанавливает цвет границы. Цвета можно задавать по названию, допустимые значения находятся тут: таблица цветов CSS , или по шестнадцатеричному коду. Как это сделать напсано в статье: цвета в CSS .

Рамка текста CSS

Вот пример использования свойства border для создания рамки шириной в один пиксел и чёрного цвета:

Этому абзацу присвоен класс example-1.

В этом примере мы также использовали свойство CSS padding , или внутренний отступ. Это свойство задаёт размер отступа от текста до обводки (границы элемента).

Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство CSS padding).

Этому абзацу присвоен класс example-2.

Как мы видим, без внутреннего отступа padding рамка текста выглядит рогато.

Как сделать рамку картинки в CSS

Рамки для картинок задаются аналогично при помощи свойства border . Давайте сделаем рамку зелёного цвета толщиной 4 пикселя для картинки.

Example-img { border: 4px solid green; }

Вот как сработает этот код:

Как закруглить углы рамки в CSS

Округление углов рамки в CSS делается при помощи свойства border-radius . Это свойство появилось в CSS3, и работает во всех современных браузерах.

Свойство border-radius может иметь от одного до четырёх значений. Если значение одно, то оно устанавливает степень закругления для всех углов. Давайте приведём пример, как будет работать это свойство с одним значением.

Example-3 { border: 1px solid black; border-radius: 15px; padding: 10px; }

Вот как он работает:

Свойство border-radius: 15px.>

Если у блока нет рамки, то есть граница border-width: 0; , то закруглена будет область залитая фоновым цветом (свойство background-color). Вот пример:

Example-4 { border-width: 0; // хотя это значение равно 0 по умолчанию background-color: #DDD; border-radius: 15px; padding: 10px; }

Вот как работает этот пример:

Свойство border-radius: 15px.>

Как я писал ранее, для свойства border-radius можно устанавливать от одного до четырёх значений. В таблице ниже описано как будут работать все комбинации значений.

Для свойсва border-radius значения можно указывать в процентах.

Давайте нарисуем круг на CSS. Для этого возьмём кватратный блок 100 на 100 пикселей и округлим углы CSS правилом border-radius: 50% .

Example-5 { width: 100px; height: 100px; background-color: #F00; border-radius: 50%; }

Вот как работает этот пример:

На этом тема "рамки в CSS" раскрыта полностью. Успехов в изучении CSS!

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

يمكنك تحديد نمط حدود على جانب واحد فقط من العنصر. للقيام بذلك، استخدم خصائص border-top (الحد العلوي)، والحدود اليمنى (الحدود اليمنى)، والحدود السفلية (الحدود السفلية)، والحدود اليسرى (الحدود اليسرى).

في هذا المثال، كل جانب من الكتلة له سمك حدود ونمط ولون مختلف.

فكر في كيفية إنشاء شكل مثل هذا باستخدام CSS:

يمكن ضبط قيم الحدود - السُمك والنمط واللون - بشكل منفصل باستخدام خصائص خاصة.

• نمط الحدود - نمط الحدود.
• عرض الحدود - عرض الحدود.
• لون الحدود - لون الحدود.

دعونا نفكر في كل قيمة على حدة.

ملكية على طراز الحدود نمط الحدود.

تحدد خاصية نمط الحدود نمط الحدود. في CSS، على عكس HTML، لا يمكن أن تكون حدود العنصر صلبة فقط. القيم التالية مسموح بها لنمط الحدود:

1. لا شيء - لا حدود (افتراضي).
2. الصلبة - الحدود الصلبة.
3. مزدوج - حد مزدوج.
4. متقطع - الحدود المنقطة.
5. منقط - حد مصنوع من سلسلة من النقاط.
6. ريدج - حدود "ريدج".
7. الأخدود - الحدود "الأخدود".
8. أقحم - الحدود الاكتئاب.
9. البداية - الحدود مقذوف.

أمثلة على ما تبدو عليه.

لا حدود (لا شيء)

الحدود الصلبة

حدود مزدوجة

حدود سلسلة من النقاط (منقط)

الحدود المتقطعة

حدود الأخدود

حدود ريدج

الحدود البادئة (أقحم)

الحدود مقذوف (البداية)

بالمناسبة، إذا قمت بتعيين لون الحدود إلى اللون الأسود لإطار التلال، فستحصل على هذه النتيجة.

كتلة div ذات حدود سوداء ونمط متعرج.

يبدو الإطار صلبًا، ولكن هذا بسبب إنشاء نمط التلال عن طريق إضافة تأثير ظل أسود، ولا يكون التأثير الأسود مرئيًا على إطار أسود.

باستخدام خاصية Border-style، يمكن تعيين نمط الحدود ليس فقط لجميع جوانب الكتلة. من الممكن تعيين قيم متعددة لخاصية نمط حدود واحدة؛ اعتمادًا على عدد القيم، سيتم تعيين نمط الحدود لعدد مختلف من جوانب الكتلة. يمكنك تعيين قيمة واحدة أو اثنتين أو ثلاث أو أربع قيم. دعونا نلقي نظرة على أمثلة لكل حالة.

قيمة واحدة (صلبة) - يتم تعيين نمط الحدود لجميع جوانب الكتلة.

قيمتان (مزدوجة صلبة) - القيمة الأولى تحدد النمط للجانبين العلوي والسفلي، والثانية للجانب.

ثلاث قيم (منقط مزدوج صلب) - القيمة الأولى للجانب العلوي، والثانية للجوانب، والثالثة للأسفل.

أربع قيم (منقط مزدوج متصل) - كل قيمة لجانب واحد في اتجاه عقارب الساعة بدءًا من الأعلى.

خاصية عرض الحدود. سمك الحدود.

لتعيين عرض حدود العنصر، استخدم خاصية عرض الحدود. يمكن تحديد سمك الحدود بأي وحدة قياس مطلقة، على سبيل المثال بالبكسل.

مثل خاصية نمط الحدود، يمكن أيضًا تعيين الخاصية إلى قيمة واحدة إلى أربع قيم. دعونا نلقي نظرة على أمثلة لكل حالة.

رمز المثال:

هناك أيضًا قيم الكلمات الرئيسية لخاصية عرض الحدود. هناك ثلاثة في المجموع:

• رقيقة - حدود رقيقة؛
• متوسط ​​- سمك متوسط؛
• حدود سميكة - سميكة؛

سمك الحدود: رفيع.

سمك الحدود: متوسط.

سمك الحدود: سميك.

خاصية لون الحدود. لون الحدود.

للتحكم في لون الحدود، استخدم أداة لون الحدود. يمكن ضبط الألوان لهذه الخاصية باستخدام أي طريقة موضحة في مقالة "الألوان في CSS"، وهي:

• تدوين سداسي عشري (#ff00aa) للون.
• تنسيق RGB هو rgb(255,12,110) . تنسيق RGBA لـ CSS3.
• تنسيقات HSL وHSLA لـ CSS3.
• اسم اللون مثلا اسود. للحصول على قائمة كاملة بأسماء الألوان، راجع جدول أسماء الألوان في CSS.

يمكن أن تحتوي خاصية border-color أيضًا على قيمة واحدة إلى أربع قيم وتعاملها بشكل مشابه للخصائص السابقة.

قيمة واحدة (حمراء).

قيمتان (أحمر أسود).

ثلاث قيم (أحمر، أسود، أصفر).

أربع قيم (أحمر، أسود، أصفر، أزرق).

لنعد الآن إلى المشكلة المذكورة أعلاه ونرسم الشكل:

إليك الكود الذي يرسم مثل هذا الشكل، ولكن بحجم أكبر فقط:

تحديد القيم للجوانب بشكل منفصل

لقد ذكرنا أعلاه أنه يمكنك تحديد قيم خاصية الحدود لجانب واحد فقط من الكتلة. هناك خصائص لهذه الأغراض:

• أعلى الحدود
• الحدود اليمنى (الحدود اليمنى)
• الحدود السفلية
• الحدود اليسرى (الحدود اليسرى)

اسمحوا لي أن أذكرك أنه بالنسبة لجميع الخصائص يتم تحديد ثلاث قيم (السُمك والنمط واللون) بأي ترتيب. ولكن هناك خصائص تسمح لك بضبط السُمك واللون والنمط لكل جانب على حدة. وكتابة هذه الخصائص مستمدة مما سبق.

خيارات الحدود العليا (الحدود العليا).

• border-top-color - يضبط لون الحد العلوي للعنصر.
• border-top-width - يضبط سمك الحد العلوي للعنصر.
• border-top-style - يضبط نمط الحد العلوي للعنصر.

خيارات الحدود اليمنى (الحدود اليمنى).

• border-right-color - يضبط لون الحد الأيمن للعنصر.
• border-right-width - يضبط سمك الحد الأيمن للعنصر.
• border-right-style - يضبط نمط الحد الأيمن للعنصر.

خيارات الحدود السفلية (الحدود السفلية).

• border-bottom-color - يضبط لون الحد السفلي للعنصر.
• border-bottom-width - يضبط سمك الحد السفلي للعنصر.
• border-bottom-style - يضبط نمط الحد السفلي للعنصر.

خيارات الحدود اليسرى (الحدود اليسرى).

• border-left-color - يضبط لون الحد الأيسر للعنصر.
• border-left-width - يضبط سمك الحد الأيسر للعنصر.
• border-left-style - يضبط نمط الحد الأيسر للعنصر.

مثال على استخدام هذه الخصائص:

خاصية نصف القطر الحدودي. تقريب الزوايا الحدودية.

تهدف الخاصية border-radius إلى تقريب زوايا حدود العنصر. تم تقديم هذه الخاصية في CSS3 وتعمل بشكل صحيح في جميع المتصفحات الحديثة باستثناء Internet Explorer 8 (والإصدارات الأقدم).

يمكن أن تكون القيم أي أرقام مستخدمة في CSS.

خاصية نصف قطر الحدود: 15 بكسل.

إذا لم يتم تحديد إطار الكتلة، فسيتم إجراء شرائح مع الخلفية. فيما يلي مثال على كتلة مستديرة بدون حدود، ولكن مع لون الخلفية:

خاصية نصف قطر الحدود: 15 بكسل.

هناك خصائص لتقريب كل زاوية على حدة من العنصر. يستخدم هذا المثال كل منهم:

نصف قطر الحدود من أعلى اليسار: 15 بكسل؛ نصف قطر الحدود من أعلى اليمين: 0؛ نصف قطر الحد السفلي الأيمن: 15 بكسل؛ نصف القطر من أسفل إلى يسار: 0;

خاصية نصف قطر الحدود: 15 بكسل.

على الرغم من أنه يمكن كتابة هذا الرمز في إعلان واحد: border-radius : 15px 0 15px 0 . والحقيقة هي أنه يمكن تعيين خاصية border-radius من قيمة واحدة إلى أربع قيم. ويوضح الجدول أدناه القواعد التي تحكم مثل هذه الإعلانات.

بعد دراسة هذا الجدول بعناية، يمكنك أن تفهم أن أقصر إدخال للنمط المطلوب سيكون على النحو التالي: border-radius : 15px 0 . هناك معنيان فقط.

القليل من الممارسة

رسم ليمونة باستخدام CSS.

هذا هو الكود الخاص بهذه الكتلة:

الهامش: 0 تلقائي؛ /* توسيط الكتلة */ width: 200px; الارتفاع: 200 بكسل؛ الخلفية: #F5F240؛ الحد: 1 بكسل صلب #F0D900؛ نصف قطر الحدود: 10 بكسل 150 بكسل 30 بكسل 150 بكسل؛

لقد رسمنا الشكل بالفعل:

الآن لنترك مثلثًا منه:

كود المثلث هو :

الهامش: 0 تلقائي؛ /* ضع الكتلة في المنتصف */ الحشو: 0px; العرض: 0 بكسل؛ الارتفاع: 0; الحدود: 30 بكسل أبيض خالص؛ لون الحدود السفلية: أحمر؛

إطار CSS3يوسع القدرة على تنسيق حدود العناصر بالخصائص التي تسمح بذلك حول الزواياعنصر، وأيضا استخدام الصورلتصميم حدود العنصر.

زوايا مستديرة وإطارات الصور

1. تقريب الزوايا بنصف القطر الحدودي

دعم المتصفح

أي: 9.0
ثعلب النار: 4.0
كروم: 4.0
سفاري: 5.0، 3.1 -مجموعة الويب-
الأوبرا: 10.5
سفاري iOS: 7.1
أوبرا ميني: —
متصفح أندرويد: 4.1
كروم لنظام أندرويد: 44

تسمح لك الخاصية بتدوير زوايا العناصر المضمنة والعناصر المحظورة. يتم تعريف المنحنى لكل زاوية باستخدام نصف قطر أو نصفين يحددان شكلها - دائرةأو الشكل البيضاوي. ينطبق نصف القطر على الخلفية بأكملها، حتى لو لم يكن للعنصر حدود، يتم تحديد الموضع الدقيق للقاطع باستخدام خاصية مقطع الخلفية.

تتيح لك الخاصية border-radius تقريب جميع الزوايا مرة واحدة، واستخدام خصائص border-top-left-radius و border-top-right-radius و border-bottom-right-radius و border-bottom-left-radius يمكن تقريب كل زاوية على حدة.

إذا قمت بتعيين قيمتين لخاصية border-radius، فسيتم تقريب القيمة الأولى إلى أعلى اليسارو الزاوية اليمنى السفلى، والثانية - اعلى اليمينو أسفل اليسار.

القيم المحددة من خلال / تحديد أفقيو نصف القطر العمودي. الملكية ليست موروثة.

خيارات

Div (العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛ الحدود: 5 بكسل صلب؛).r1 (نصف قطر الحدود: 0 0 20 بكسل 20 بكسل;).r2 (نصف قطر الحدود: 0 10 بكسل 20 بكسل;).r3 (نصف قطر الحدود: 10 بكسل 20 بكسل;). ;) .r4 (نصف قطر الحدود: 10px/20px;) .r5 (نصف قطر الحدود: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (نصف قطر الحدود: 10px 20px 30px 40px/30px;) .r7 ( نصف قطر الحدود: 50%؛).r8 (الحد العلوي: لا شيء؛ الحد السفلي: لا شيء؛ نصف قطر الحدود: 30 بكسل/90 بكسل؛).r9 (نصف القطر للحدود السفلية اليسرى: 100 بكسل؛).r10 (الحدود -نصف القطر: 0 100%;).r11 (نصف قطر الحدود: 0 50% 50% 50%;).r12 (نصف قطر الحد العلوي الأيسر: 100% 20 بكسل؛ نصف قطر الحدود السفلي الأيمن: 100% 20 بكسل ;)
أرز. 1. أمثلة على الخيارات المختلفة لتقريب زوايا الكتل

2. صورة الحدود

دعم المتصفح

أي: 11.0
ثعلب النار: 15.0، 3.5 موز-
كروم: 16.0، 7.0 -ويبكيت-
سفاري: 6.0، 3.0 -ويبكيت-
الأوبرا: 15.0، 11.0 -س-
سفاري iOS: 7.1
أوبرا ميني: 8 -س-
متصفح أندرويد: 4.4، 4.1 -مجموعة الويب-
كروم لنظام أندرويد: 42

تسمح لك الخاصية بتعيين صورة كإطار للعنصر. الشرط الرئيسي للصورة هو أنها يجب أن تكون متناظرة. تتضمن الخاصية القيم التالية: (border-image: width source section Repeat outset;) .

باستخدام هذه الصورة البسيطة يمكنك الحصول على إطارات مثل هذه لعنصر ما.

/* مثال 1 */ div ( العرض: 260 بكسل; الارتفاع: 100 بكسل; نمط الحدود: صلب; عرض صورة الحدود: 15 بكسل; مصدر صورة الحدود: url(border_round.png); شريحة صورة الحدود: 30 ; تكرار صورة الحدود: امتداد) /* مثال 2 */ div ( العرض: 260 بكسل; الارتفاع: 100 بكسل; نمط الحدود: صلب; عرض صورة الحدود: 15 بكسل; مصدر صورة الحدود: url(border_round. png)؛ شريحة صورة حدودية: 30؛
أرز. 2. مثال لتصميم حدود الكتل باستخدام صورة

تشكل القطع A - B - C - D زوايا الإطار، وجزء الصورة الموجود بينها يملأ المساحة المتبقية من الإطار وفقًا للقيمة المحددة لخاصية border-image-repeat. يتم تعيين حجم جزء الزاوية (في هذا المثال الرقم 30) باستخدام قيمة خاصية border-image-slice.

2.1. عرض الحدود الصورة

تحدد الخاصية عرض الصورة لحدود العنصر. إذا لم يتم تحديد العرض، فسيتم تعيينه افتراضيًا على 1.

عرض الحدود الصورة
قيم:
طول	يضبط عرض الحدود بوحدات الطول - px / em . يمكنك ضبط من قيمة واحدة إلى أربع قيم في المرة الواحدة. إذا تم تحديد قيمة واحدة، فإن عرض جميع جوانب الإطار هو نفسه، وتحدد القيمتان عرض الجزء العلوي السفلي واليمين واليسار، وما إلى ذلك.
رقم	القيمة الرقمية التي يتم بها ضرب قيمة عرض الحد.
%	يتم حساب عرض حدود العنصر بالنسبة لحجم الصورة. أفقي بالنسبة للعرض، عمودي - بالنسبة للارتفاع.
آلي	يتوافق مع قيمة شريحة الصورة الحدودية.
أولي
يرث

بناء الجملة

Div (عرض الصورة الحدودية: 30 بكسل؛) الشكل. 3. مثال على ضبط عرض إطار الصورة باستخدام أنواع مختلفة من القيم

2.2. مصدر صورة الحدود

تحدد الخاصية المسار إلى الصورة التي سيتم استخدامها لتزيين حدود الكتلة.

بناء الجملة

Div (مصدر صورة الحدود: url(border.png);)

2.3. عناصر شريحة الصورة الحدودية

تحدد الخاصية حجم أجزاء الصورة المستخدمة لتحديد حدود العنصر، وتقسم الصورة إلى تسعة أجزاء: أربعة زوايا، وأربعة حواف بين الزوايا، وجزء مركزي.

قيم:
رقم	يمكن ضبط حجم أجزاء الإطار باستخدام قيمة واحدة أو اثنتين أو ثلاث أو أربع قيم. تقوم إحدى القيم بتعيين الحدود لتكون بنفس الحجم على كل جانب من جوانب العنصر. قيمتان: تحدد الأولى حجم الحدود العلوية والسفلية، والثانية - الحدود اليمنى واليسرى. ثلاث قيم: الأولى تحدد حجم الحد العلوي، والثانية - اليمين واليسار، والثالثة - الحد السفلي. أربع قيم: تحديد أحجام الحدود العلوية واليمنى والسفلية واليسرى. تمثل القيمة الرقمية عدد البكسل.
%	يتم حساب أحجام الحدود بالنسبة لحجم الصورة. أفقي بالنسبة للعرض، عمودي - بالنسبة للارتفاع.
يملأ	تتم الإشارة إلى القيمة مع رقم أو نسبة مئوية. في حالة التحديد، لا يتم قطع الصورة بواسطة الحافة الداخلية للإطار، ولكنها تملأ أيضًا المساحة الموجودة داخل الإطار.
أولي	يضبط هذه الخاصية على قيمتها الافتراضية.
يرث	يرث قيمة هذه الخاصية من العنصر الأصل.

بناء الجملة

Div (شريحة صورة الحدود: 50 20؛)
أرز. 4. مثال على تحديد شرائح إطار الصورة

2.4. تكرار صورة الحدود

تتحكم هذه الخاصية في كيفية ملء صورة الخلفية للمسافة بين زوايا الإطار. يمكن تحديدها باستخدام قيمة واحدة أو زوج من القيم.

بناء الجملة

Div (تكرار الصورة الحدودية: تكرار؛) الشكل 1. 5. مثال على تكرار الجزء المركزي من إطار الصورة باستخدام أنواع مختلفة من القيم

2.5. الحدود-الصورة-البداية

تسمح لك الخاصية بتحريك إطار الصورة خارج حدود العنصر بطول محدد. يمكن تحديدها باستخدام قيمة واحدة أو أربع قيم.

بناء الجملة

Div (الحدود-الصورة-البداية: 10 بكسل؛)
أرز. 6. مثال على إزاحة إطار الصورة باستخدام أنواع مختلفة من القيم

3. إزاحة الإطار الخارجي إزاحة المخطط التفصيلي

تحدد الخاصية المسافة بين حدود عنصر الحدود والحد الخارجي الذي تم إنشاؤه باستخدام خاصية المخطط التفصيلي.

/*الشكل 1:*/ img (الحدود: 1 بكسل وردي خالص؛ المخطط التفصيلي: 1 بكسل رمادي متقطع؛ إزاحة المخطط التفصيلي: 3 بكسل;) /*الشكل 2:*/ img (عرض الحدود: 1 بكسل 10 بكسل; نمط الحدود: صلب; لون الحدود: وردي؛ المخطط التفصيلي: 1 بكسل رمادي متقطع؛
أرز. 7. مثال لتزيين صورة بإطار خارجي

4. إطار التدرج

لا يمكن أن تكون قيمة الصورة الحدودية صورة فحسب، بل يمكن أيضًا أن تكون تعبئة متدرجة.

إطار شفاف

أحد الألوان شفاف . بهذه الطريقة، يمكنك تعيين حدود لجميع جوانب العنصر مرة واحدة أو بشكل منفصل لكل جانب. يتم التحكم في سمك الحدود بواسطة خاصية عرض الحدود.

* (حجم الصندوق: صندوق حدود؛).التفاف (الارتفاع: 200 بكسل؛ الحشو: 25 بكسل؛ الخلفية: #00E4F6؛) .تدرج (الارتفاع: 150 بكسل؛ العرض: 50%؛ الهامش: 0 تلقائي؛ الحد: 10 بكسل شفاف صلب صورة الحدود: تدرج خطي (إلى اليمين، شفاف 0%، #ADF2F7 100%)؛

ظرف بريدي

* (حجم الصندوق: صندوق حدود؛).التفاف ( الارتفاع: 200 بكسل؛ الحشو: 25 بكسل؛ ) .تدرج (الارتفاع: 150 بكسل؛ العرض: 50%؛ الهامش: 0 تلقائي؛ الحد: 10 بكسل شفاف؛ صورة الحدود: 10 تكرار التدرج الخطي (45deg، #A7CECC، #A7CECC 10px، شفاف 10px، شفاف 20px، #F8463F 20px، #F8463F 30px، شفاف 30px، شفاف 40px )