Css стили рамки: border-style — стили рамок | CSS справочник

Leave a Comment / Css / By /

border-style — стили рамок | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство border-style устанавливает стиль рамки для элемента. Можно использовать от 1 до 4 значений. Стиль устанавливается начиная с верхней позиции. Если задано два стиля подряд, это значит первое значение для верхней и нижней рамки, второе значение для правой и левой рамки.

  • border-style: dotted solid double dashed;
    • Верхняя рамка — точечная
    • Правая рамка — сплошная
    • Нижняя рамка — двойная
    • Левая рамка — пунктирная

  • border-style: dotted solid double;
    • Верхняя рамка — точечная
    • Правая и левая рамка — сплошные
    • Нижняя рамка — двойная

  • border-style: dotted solid;
    • Верхняя и нижняя рамка — точечные
    • Правая и левая рамка — сплошные

  • border-style: dotted;
    • Все четыре рамки — точечные

Значение по умолчанию: none
Применяется: ко всем элементам, а также к псевдо-элементу ::first-letter
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object. style.borderStyle=»dotted double»

Синтаксис

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;

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

Значение
Описание
none Указывает, что рамка отсутствует.
hidden Тоже самое что и значение «none».
dotted Точечная рамка.
dashed Пунктирная рамка.
solid Сплошная рамка.
double Двойная рамка.
groove Объемная рифленая вдавленная рамка.
ridge Объемная рифленая выпуклая рамка.
inset Объемная вдавленная рамка.
outset Объемная выпуклая рамка.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

border-style:

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

dotted solid double dashed

dotted solid

div {
border-width: 5px;
border-style: none;
}

Рамки | CSS

Любой блочный элемент в HTML можно выделять с помощью рамок. Такой стилистический приём позволяет удобно отделить однотонные компоненты друг от друга, или выделить ключевой элемент на странице

Этот текст находится в рамке, поэтому его легко найти с первого взгляда на страницу

Для создания границы у элемента используется свойство

border, которое является сокращением от нескольких свойств:

  • border-width — ширина границы
  • border-style — стиль границы
  • border-color — цвет границы

Можно указывать несколько свойств, а можно всё объединить в рамках свойства border. Такой вариант встречается чаще всего и выглядит он так:

.element {
  border: 1px solid #ccc;
}

где:

  • 1px — ширина границы
  • solid — стиль границы
  • #ccc — цвет границы

Со значениями в пикселях и hex-цветом мы уже сталкивались в рамках курса, а вот стилей границ в CSS восемь:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

и есть значение none, которое «удалит» границу, так как при значении border-style: none браузеры игнорируют другие свойства и удаляют границу

Примеры границ

solid (сплошная)

dotted (пунктирная)

dashed (штриховая)

<style>
  .border-dotted {
    border: 1px dotted #000;
  }
</style>
<div>
  Блок с пунктирной рамкой и чёрным цветом
</div>

Задание

Добавьте в редактор <div> с классом border-bold и установите сплошную границу толщиной 5 пикселей. Цвет рамки #2196F3. Стили запишите в теге <style>

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Граница

— CSS: Каскадные таблицы стилей

Свойство CSS border устанавливает границу элемента. Он устанавливает значения border-width , border-style и border-color .

Это свойство является сокращением для следующих свойств CSS:

  • цвет границы
  • с каймой
  • ширина границы 
 /* стиль */
граница: сплошная;
/* ширина | стиль */
граница: 2px пунктирная;
/* стиль | цвет */
граница: начало #f33;
/* ширина | стиль | цвет */
граница: средняя пунктирная зеленая;
/* Глобальные значения */
граница: наследовать;
граница: начальная;
граница: возврат;
граница: обратный слой;
граница: не установлена;

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

Примечание: Граница будет невидимой, если ее стиль не определен. Это связано с тем, что стиль по умолчанию равен none .

Значения

Устанавливает толщину границы. По умолчанию средний если отсутствует. См. ширина границы .

<стиль строки>

Устанавливает стиль границы. По умолчанию

нет если отсутствует. См. стиль границы .

<цвет>

Задает цвет границы. По умолчанию currentcolor , если отсутствует. См. цвет границы .

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

Сокращение border особенно полезно, когда вы хотите, чтобы все четыре границы были одинаковыми. Однако, чтобы сделать их отличными друг от друга, вы можете использовать длинные свойства border-width , border-style и border-color

, которые принимают разные значения для каждой стороны. Кроме того, вы можете нацеливать одну границу за раз с помощью физической (например, border-top ) и логические (например, border-block-start ) свойства границ.

Границы и контуры

Границы и контуры очень похожи. Однако контуры отличаются от границ следующими способами:

  • Контуры никогда не занимают места, так как они рисуются за пределами содержимого элемента.
  • Согласно спецификации контуры не обязательно должны быть прямоугольными, хотя обычно они таковыми и являются.
 граница = 
 <ширина строки> || 
 <стиль строки> || 
 <цвет> 
 "> = 
  | 
 тонкий | 
 средний | 
 толстый 
 
 "> = 
 нет | 
 скрыто | 
 пунктирная | 
 пунктир | 
 твердый | 
 двойной | 
 канавка | 
 хребет | 
 вставка | 
 начало

Установка розовой границы начала

HTML 
 
 
У меня есть граница, контур и тень блока! Удивительно, не так ли?
CSS 
 раздел {
  кайма: 0,5рем, начало розовое;
  канва: 0,5рем однотонный хаки;
  box-shadow: 0 0 0 2rem небесно-голубой;
  радиус границы: 12px;
  шрифт: жирный 1rem без засечек;
  поля: 2re;
  набивка: 1рем;
  смещение контура: 0,5 бэр;
}
Результат
Спецификация
CSS Фаролы и границ модуль 3
# Propdef-Border
  • 9 9015
    # Propdef-Border
  • 9 9015
    # PropDef-Border
  • 9 9015
    # Propdef-Border
  • 9 9015
    # Propdef-Border
  • 9 9016 2
    . 0013 с включенным JavaScript. Включите JavaScript для просмотра данных.
    • ширина границы
    • с каймой
    • цвет рамки
    • контур
    • Фоны и рамки
    • Изучение CSS: фоны и границы

    Последнее изменение: , участниками MDN

    граница | CSS-трюки — CSS-трюки

    DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

     .box {
  граница: 3 пикселя сплошного красного цвета;
  высота: 200 пикселей;
  ширина: 200 пикселей;
}

     

    Синтаксис 

     border:  || <стиль строки> ||

    Значения

    Свойство border принимает одно или несколько из следующих значений в комбинации:

    • border-width : Указывает толщину границы.
      • : числовое значение, измеренное в px , em , rem , vh и vw единиц.
      • Thin : эквивалент 1PX
      • Средняя : эквивалент 3PX
      • Толстая : эквивалент 5px
    • 45. 5px

      20

  • .newalle :
  • ..505: : 9005: : : : : : : : : : : : : : : : : : .. линия, проведенная вокруг элемента, в том числе:
    • сплошная : сплошная непрерывная линия.
    • нет (по умолчанию): линия не рисуется.
    • скрыто : Линия рисуется, но не видна. это может быть удобно для добавления небольшой дополнительной ширины к элементу без отображения границы.
    • пунктир : линия, состоящая из штрихов.
    • с точками : Линия, состоящая из точек.
    • double : Вокруг элемента рисуются две линии.
    • углубление : Добавляет скос на основе значения цвета таким образом, чтобы элемент выглядел вдавленным в документ.
    • ребро : Аналогичен канавке , но значения цвета меняются местами таким образом, что элемент кажется приподнятым.
    • вставка : Добавляет разделенный тон к линии, что делает элемент слегка вдавленным.
    • outset : Аналогичен inset , но цвета меняются местами таким образом, что элемент кажется слегка приподнятым.
  • цвет границы : определяет цвет границы и принимает все допустимые значения цвета.

    • Уф, сколько стоит одна маленькая собственность! Вот демонстрация, которая иллюстрирует различия между всеми этими значениями стиля:

    Поддержка браузера

    Вы можете рассчитывать на отличную поддержку свойства border во всех браузерах.

    Chrome Safari Firefox Opera IE Android iOS
    Yes Yes Yes 3.5+ 4+ Yes Yes

    More information

    • CSS Спецификация уровня 3 модуля «Фон и границы»
    • Понимание изображения границ
    • История градиентов границ

    пограничный блок

    .element { бордюрный блок: 5px сплошной #f8a100; }

    граница-граница

    .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *