Главная » Языки программирования

Css границы блока примеры

На чтение 9 мин
Содержание
  1. Свойство CSS border
  2. 1. Синтаксис CSS border
  3. 2. Примеры с различными границами рамок CSS border
  4. 2.1. Пример. Разные стили оформления границы рамки border-style
  5. 2.2. Пример. Изменения цвета рамки при наведении курсора мыши
  6. 2.3. Пример. Как сделать прозрачную рамку border
  7. 3. Толщина границы: свойство border-width
  8. 4. Как сделать рамку border только с одного края (границы)
  9. 4.1. Пример. Красивая рамка для выделения цитат
  10. 5. Как сделать несколько границ border у элемента html
  11. 5.1. Первый вариант с несколькими границами
  12. 5.2. Наложение теней для создания нескольких границ
  13. 6. Скругление углов у границ (border-radius)
  14. 7. Вдавленная линия CSS
  15. border
  16. Синтаксис
  17. Значения
  18. Обычный синтаксис
  19. Примеры
  20. HTML
  21. CSS
  22. Результат
  23. Спецификация
  24. Совместимость браузеров
  25. Также смотрите
  26. Found a content problem with this page?

Свойство CSS border

Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.

1. Синтаксис CSS border

border: border-width border-style border-color | inherit;
  • border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
  • border-style — стиль выводимой рамки. Может принимать следующие значения
    • none или hidden — отменяет границу
    • dotted — рамка из точек
    • dashed — рамка из тире
    • solid — простая линия (применяется чаще всего)
    • double — двойная рамка
    • groove — рифленая 3D граница
    • ridge , inset , outset — различные 3D эффекты рамки
    • inherit — применяется значение родительского элемента

    Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

    2. Примеры с различными границами рамок CSS border

    2.1. Пример. Разные стили оформления границы рамки border-style

    html> head> style> .border_style_dotted< border: 2px dotted #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_dashed< border: 2px dashed #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_solid< border: 2px solid #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_double< border: 2px double #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_groove< border: 5px groove #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_ridge< border: 5px ridge #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_inset< border: 5px inset #1E90FF; padding: 3px; margin-bottom: 5px; > .border_style_outset< border: 5px outset #1E90FF; padding: 3px; margin-bottom: 5px; > .border_complex< border-left: 5px solid #1E90FF; border-right: 5px dotted #1E90FF; border-top: 5px double #1E90FF; border-bottom: 5px dashed #1E90FF; padding: 3px; margin-bottom: 5px; > /style> /head> body> div class css">border_style_dashed">border-style: dashed/div> div class css">border_style_dashed">border-style: dashed/div> div class css">border_style_solid">border-style: solid/div> div class css">border_style_double">border-style: double/div> div class css">border_style_groove">border-style: groove/div> div class css">border_style_ridge">border-style: ridge/div> div class css">border_style_inset">border-style: inset/div> div class css">border_style_outset">border-style: outset/div> div class css">border_complex">Четыре разных рамки/div> /body> /html>

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

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

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

    html> head> style> .border_hover< border: 2px solid #1E90FF; padding: 5px; width: 500px; height: 60px; > .border_hover:hover< border: 2px solid #F0F; padding: 5px; > /style> /head> body> div class css">border_hover">При наведении курсора мыши на блок цвет рамки изменится/div> /body> /html>

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

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

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

    html> head> style> .opacity_border< border: 10px solid rgba(80, 55, 80, 0.5); background: url('img/primer-fona.jpg'); width: 130px; height: 116px; > /style> /head> body> div class css">opacity_border"> /div> /body> /html>

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

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

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

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

    border-width: thin | medium | thick | значение;
    • thin — тонкая толщина линии
    • medium — средняя толщина линии
    • thick — толстая толщина линии

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

    html> head> style> .border_width_thin< border-style: solid; border-color: #1E90FF; border-width: thin; > .border_width_medium< border-style: solid; border-color: #1E90FF; border-width: medium; > .border_width_thick< border-style: solid; border-color: #1E90FF; border-width: thick; > .border_width< border-style: solid; border-color: #1E90FF; border-width: 1px 2px 3px 4px; > /style> /head> body> div class css">border_width_thin">border-width: thin/div> div class css">border_width_medium">border-width: medium/div> div class css">border_width_thick">border-width: thick/div> div class css">border_width">Разная толщина у границ/div> /body> /html>

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

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

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

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

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

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

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

    /* Описание двух одинаковых стилей: */ style> .svoystvo1< border-top: 1px solid #DEB887; > .svoystvo2< border-top-color: #DEB887; border-top-style: solid; border-top-width: 1px; > /style>

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

    html> head> style> .primer_ramka_citata< width: 300px; height: 200px; border: 1px solid #DEB887; border-left: 2px dashed #006400; background: #EEE8AA; padding: 5px; margin-bottom: 5px; > /style> /head> body> div class css">primer_ramka_citata">Пример рамки для цитаты/div> /body> /html>

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

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

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

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

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

    html> head> style> .neskolko_granic < width: 200px; height: 200px; position: relative; border: 10px solid orange; > .neskolko_granic:after, .neskolko_granic:before < content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; > .neskolko_granic:after < border: 5px solid red; outline: 5px solid yellow; > .neskolko_granic:before < border: 10px solid green; > /style> /head> body> div class css">neskolko_granic"> /div> /body> /html>

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

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

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

    html> head> style> .neskolko_granic_2 < border: 5px solid red; width: 150px; height: 150px; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; > /style> /head> body> div class css">neskolko_granic_2"> /div> /body> /html>

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

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

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

    div style value2">width:200px; height:100px; border:3px solid #ae0; border-radius: 10px">div>

    Более подробно про свойство border-radius читайте в отдельной статье: как скруглить углы у рамок в HTML.

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

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

    html> head> style> .vdavlennaya_liniya < border: 1px solid #222; border-bottom: 1px solid #333; > /style> /head> body> hr class css">vdavlennaya_liniya" /> /body> /html>

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

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

    [window.]document.getElementById("elementID").style.border value">VALUE"

    Источник

    border

    Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, border не может быть использован для указания пользовательского значения border-image (en-US), но вместо этого устанавливает его в начальное значение, т.е. none .

    border: 1px; border: 2px dotted; border: medium dashed green;

    Примечание: Рекомендуется использовать border , когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width , border-style (en-US), и border-color (en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

    Синтаксис

    Свойство border указывается используя одно или более значений , , и указанных ниже.

    Значения

    Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width .

    Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style (en-US).

    Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).

    Обычный синтаксис

    border =
    || (en-US)
    || (en-US)

    =
    | (en-US)
    thin | (en-US)
    medium | (en-US)
    thick

    =
    none | (en-US)
    hidden | (en-US)
    dotted | (en-US)
    dashed | (en-US)
    solid | (en-US)
    double | (en-US)
    groove | (en-US)
    ridge | (en-US)
    inset | (en-US)
    outset

    Примеры

    HTML

    div class="fun-border">Look at my borders.div> p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!p> style contenteditable> .fun-border  border: 2px solid red; > style>

    CSS

    style  display: block; border: 1px dashed black; >

    Результат

    Спецификация

Оцените статью
© 2023 Программирование