Какое свойство в css создает рамку
Перейти к содержимому

Какое свойство в css создает рамку

  • автор:

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

Результат

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

Specification
CSS Backgrounds and Borders Module Level 3
# propdef-border
  • 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

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

        • border-radius -related CSS properties: border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US), border-bottom-left-radius (en-US)

        Found a content problem with this page?

        • Edit the page on GitHub.
        • Report the content issue.
        • View the source on GitHub.

        This page was last modified on 23 янв. 2024 г. by MDN contributors.

        Your blueprint for a better internet.

        border

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

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

        • border — width ;
        • border — style ;
        • border — color .

        Пример

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

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

           

        Повседневная практика показывает, .

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

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

         .element  border: 5px solid #2E9AFF;> .element  border: 5px solid #2E9AFF; >      

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

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

         div> div class="arrow _prev">div> div class="arrow _next">div> div>      
         .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);> .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-width . Оно может принимать следующие значения:

        border-width: medium — средняя (по умолчанию)

        border-width: thin — тонкая

        border-width: thick — толстая

        border-width: inherit — значение принимается от родительского элемента

        Чаще всего ширину указывают в каких-либо единицах измерения, существующих в CSS.

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

        Создание рамок в CSS. Свойство border

        CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

        Оформление рамок и границ HTML-элементов с помощью CSS-свойств

        1. Стиль рамки border-style

        По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

        dotted
        dashed
        solid
        double
        groove
        ridge
        inset
        outset

        Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:

        2. Цвет рамки border-color

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

        border-color
        (border-top-color, border-right-color, border-bottom-color, border-left-color)
        Значения:
        transparent Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
        цвет Цвет рамок задается при помощи значений свойства .

        Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:

        3. Ширина рамки border-width

        Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

        4. Задание рамки одним свойством

        Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

        При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.

        5. Задание рамки для одной границы элемента

        В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
        Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

        Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .

        6. Внешний контур outline

        Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.

        Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.

        Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .

        Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.

        6.1. Стиль внешнего контура outline-style

        Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.

        6.2. Цвет внешнего контура outline-color

        Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.

        6.3. Толщина внешнего контура outline-width

        Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.

        Здравствуйте, уважаемые друзья и гости блога! Сегодня продолжаем с вами знакомится с элементами сайтостроения и давайте научимся создавать рамки css. В прошлой своей статье я вам рассказал и показал, как создаются , но рамки css смотрятся более красивее и привлекательнее. Поэтому кто научился делать рамки html, тот и осилит создание рамки css. А я вам в этом помогу! Давайте приступим.

        Как самому сделать рамки css для сайта?

        Как я вам уже выше сказал, что рамки css намного красивее и практичнее, чем рамки html и вам никакого труда не составит создать такие рамки css самостоятельно, если Вы уже научились делать рамки html.

        Что нам потребуется, чтобы сделать рамки css? Ничего заоблачного! Ваше желание и моя статья, в которой я вам все подробно объясню.

        Первый пример рамки css

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

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