CSS3 предоставляет два новых свойства для более элегантного оформления границ элемента: свойство border-image для добавления изображений к границам и свойство border-radius для скругления углов без использования каких-либо изображений.

В этом разделе описываются эти новые свойства границ CSS3, для ознакомления с другими свойствами, связанными с границами см. Руководство по свойству border в CSS.

Свойство border-radius

Свойство border-radius можно использовать для создания закругленных углов. Это свойство обычно определяет форму угла внешней границы border.

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

До CSS3 использовались нарезанные изображения для создания закругленных углов, что было довольно утомительно.

Свойство border-image

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

Дизайн границы создается из сторон и углов изображения, указанных в URL-адресе источника изображения границы border-image. Изображение границы может быть нарезано, повторено, масштабировано и растянуто различными способами, чтобы соответствовать размеру области изображения границы.

.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;
}

Параметр round является вариантом параметра repeat, который распределяет фрагменты изображения таким образом, чтобы стыки были хорошо соединены.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.