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

Типы линий border css

Содержание
  1. border
  2. Пример
  3. border
  4. Синтаксис
  5. Значения
  6. Обычный синтаксис
  7. Примеры
  8. HTML
  9. CSS
  10. Результат
  11. Спецификация
  12. Совместимость браузеров
  13. Также смотрите
  14. Found a content problem with this page?
  15. Как создать рамку вокруг элемента. CSS-свойство border
  16. Значения свойства border
  17. Border-width
  18. Border-style
  19. Border-color
  20. Наследование
  21. Для чего использовать свойство border
  22. Нюансы
  23. Чем заменить свойство
  24. Материалы по теме
  25. border
  26. Синтаксис
  27. Значения
  28. Объектная модель
  29. Браузеры

border

Свойство border отвечает за отрисовку видимой границы блока. Часто видимую границу блока называют рамкой.

Само свойство border является шорткатом (короткой записью) и объединяет в себе значение для нескольких полных свойств:

Пример

Скопировать ссылку «Пример» Скопировано

Украсим текстовую карточку цветной сплошной рамкой.

   
Повседневная практика показывает, .
   div class="element"> p>Повседневная практика показывает, . p> div>

Зададим рамку толщиной 5 пикселей, сплошную, цвета #ED6742:

 .element  border: 5px solid #ed6742;> .element  border: 5px solid #ed6742; >

Внешний вид наложения рамок

🛠 Ещё немного про треугольники. А точнее, стрелки. Их тоже можно создать при помощи border , но тут понадобится подключить свойство transform , чтобы повернуть элемент с рамками на 45 градусов в нужную сторону:

 div class="arrows"> div class="arrow _prev">div> div class="arrow _next">div> div>      
 .arrows  max-width: 1200px; height: 250px; margin: 0 auto; background-color: #f1f1f1;> .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001;> .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg);> .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate( -135deg );> .arrows  max-width: 1200px; height: 250px; margin: 0 auto; background-color: #f1f1f1; > .arrow  /* Рисуем квадрат */ width: 50px; height: 50px; /* Задаём левую рамку */ border-left: 5px solid #ff0001; /* Задаём нижнюю рамку */ border-bottom: 5px solid #ff0001; > .arrow._prev  /* Поворачиваем квадрат нижним левым углом влево */ transform: rotate(45deg); > .arrow._next  /* Поворачиваем квадрат нижним левым углом вправо */ transform: rotate( -135deg ); >

Чем не стрелки для слайдера? 🤗

🛠 Часто встречающийся дизайнерский приём — появление рамки вокруг элемента при наведении на него курсора мыши.

Если просто добавлять рамку по селектору :hover , то элемент будет дёргаться. Причина в том, что размер элемента увеличивается на ширину рамки. Чтобы подобных подёргиваний не происходило, изначально задайте рамку нужной толщины, но установите ей прозрачный цвет ( transparent ). А по наведению курсора просто меняйте цвет на нужный. Profit! Вы прекрасны 😄

Источник

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

Результат

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

  • border-width : как и у каждого из подсвойств этого свойства:
    • border-top-width (en-US): medium
    • border-right-width (en-US): medium
    • border-bottom-width (en-US): medium
    • border-left-width (en-US): medium
    • border-top-style (en-US): none
    • border-right-style (en-US): none
    • border-bottom-style (en-US): none
    • border-left-style (en-US): none
    • border-top-color (en-US): currentcolor
    • border-right-color (en-US): currentcolor
    • border-bottom-color (en-US): currentcolor
    • border-left-color (en-US): currentcolor
    • border-width : как и у каждого из подсвойств этого свойства:
      • border-bottom-width (en-US): абсолютная длина или 0 , если border-bottom-style (en-US) — none или hidden
      • border-left-width (en-US): абсолютная длина или 0 , если border-left-style (en-US) — none или hidden
      • border-right-width (en-US): абсолютная длина или 0 , если border-right-style (en-US) — none или hidden
      • border-top-width (en-US): абсолютная длина или 0 , если border-top-style (en-US) — none или hidden
      • border-bottom-style (en-US): как указано
      • border-left-style (en-US): как указано
      • border-right-style (en-US): как указано
      • border-top-style (en-US): как указано
      • border-bottom-color (en-US): вычисленный цвет
      • border-left-color (en-US): вычисленный цвет
      • border-right-color (en-US): вычисленный цвет
      • border-top-color (en-US): вычисленный цвет
      • border-color (en-US): как и у каждого из подсвойств этого свойства:
        • border-bottom-color (en-US): цвет
        • border-left-color (en-US): цвет
        • border-right-color (en-US): цвет
        • border-top-color (en-US): цвет
        • border-bottom-width (en-US): длина
        • border-left-width (en-US): длина
        • border-right-width (en-US): длина
        • border-top-width (en-US): длина

        Совместимость браузеров

        BCD tables only load in the browser

        Также смотрите

        Found a content problem with this page?

        This page was last modified on 11 февр. 2023 г. by MDN contributors.

        Your blueprint for a better internet.

        Источник

        Как создать рамку вокруг элемента. CSS-свойство border

        CSS-свойство border используется для задания стиля, толщины и цвета границы элемента. Граница — это линия, которая окружает элемент и отделяет его контент от соседних элементов. С помощью свойства border можно создавать различные рамки — от простых одноцветных линий до сложных узоров и теней.

        В общем виде свойство записывается так:

        border-width — задаёт толщину границы.

        border-style — устанавливает стиль рамки.

        border-color — определяет цвет рамки.

        Абзацу добавлена видимая граница border

        Значения свойства border

        Border-width

        Свойство border-width определяет толщину рамки и может быть задано в пикселях ( px ), процентах ( % ) или описано ключевым словом — thin , medium , thick .

        • thin — тонкая граница, обычно около одного пикселя.
        • medium — средняя граница, около трёх пикселей.
        • thick — толстая граница, примерно пять пикселей.

        Border-style

        border-style — задаёт стиль границы и может принимать одно из значений — none , hidden , dotted , dashed , solid , double , groove , ridge , inset , outset .

        hidden — граница скрыта, но она занимает место.

        solid — сплошная линия границы.

        groove — объёмная рифлёная вдавленная рамка.

        ridge — объёмная рифлёная выпуклая рамка.

        inset — объёмная вдавленная рамка.

        outset — объёмная выпуклая рамка.

        Border-color

        border-color — определяет цвет рамки и может быть задан в виде ключевого слова, соответствующего названию цвета, hex-кода, rgb или hls значений. Значение currentColor использует текущий цвет текста в качестве цвета границы.

        Наследование

        Свойство border не наследуется от родительских элементов. Граница, заданная для одного элемента, не будет применяться к его дочерним элементам.

        ⭐ Свойство border поддерживается современными браузерами. Актуальная информация — на caniuse.com.

        Для чего использовать свойство border

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

        Созданиетенейили выделений. Свойство border можно комбинировать с другими свойствами, такими как box-shadow или outline , для создания различных эффектов теней или выделений.

        Разделение разных частей элемента. С помощью свойства border можно разделять различные части элемента, например, заголовок и содержимое блока.

        Нюансы

        Если нужно задать отдельные значения для каждой стороны границы, рекомендуется использовать отдельные свойства border-top , border-right , border-bottom и border-left .

        Рамка с разными стилями сторон

        Для создания рамок с закруглёнными углами используют свойство border-radius .

        Чем заменить свойство

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

        Материалы по теме

        «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

        Источник

        border

        Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .

        Синтаксис

        Значения

        Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

        Стили рамок

        border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

        inherit наследует значение родителя.

        HTML5 CSS2.1 IE Cr Op Sa Fx

        В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

        Применение свойства border

        Рис. 2. Применение свойства border

        Объектная модель

        [window.]document.getElementById(» elementID «).style.border

        Браузеры

        Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

        Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

        Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

        Источник

        Читайте также:  Mail files with php
Оцените статью
© 2024 Программирование