Articles
Введение в CSS
Свойства CSS, связанные с украшением моделью коробки

Свойства CSS, связанные с украшением моделью коробки

В этой статье объясняются свойства CSS, связанные с украшением моделью коробки.

Вы можете узнать, как задавать такие свойства, как рамки и тени.

YouTube Video

HTML для предварительного просмотра

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Украшение

Свойство border 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

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

Основная структура свойства border 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • Используйте border-width для указания толщины рамки. Единицы измерения указываются в px, em, % и т.д.

  • Укажите тип рамки с помощью свойства border-style. Вы можете указать следующие значения.

    • Значения стилей:
      • none (без рамки)
      • solid (сплошная линия)
      • dotted (пунктирная линия)
      • dashed (штриховая линия)
      • double (двойная линия)
      • groove (рельефная линия)
      • ridge (выпуклая линия)
      • inset (вставленная тень линии)
      • outset (выдвинутая тень линии)

Укажите цвет рамки с помощью свойства border-color. Цвет можно указать, используя названия цветов, rgb(), rgba(), hex и т.д.

Индивидуальные настройки для каждой стороны 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

Вы также можете установить разные стили для каждой стороны, как показано здесь.

Индивидуальные настройки для ширины, стиля и цвета 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

Вы также можете указать каждый аспект отдельно, используя border-width, border-style и border-color.

Сочетание с border-radius 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

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

Свойство border-radius 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

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

Объяснение:

  • Класс border-radius-all-rounded делает все углы округлыми с радиусом 20 пикселей, создавая плавно округленную рамку.
  • Класс border-radius-top-left-rounded скругляет только верхний левый угол с радиусом 20 пикселей, оставляя остальные углы прямыми.
  • Класс border-radius-ellipse-corners создает эллиптические углы, придавая рамке горизонтально растянутую округлую форму.

Формат свойства border-radius 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • Значение свойства border-radius обычно указывается в пикселях или процентах. Также вы можете задать от 1 до 4 значений.
    • Задание одного значения делает все углы равномерно округленными.
    • Указание двух значений применяет первое значение к верхнему левому и нижнему правому углам, а второе значение — к верхнему правому и нижнему левому углам.
    • Указав четыре значения, вы можете задать разные радиусы для каждого угла. Значения применяются по часовой стрелке, начиная с верхнего левого угла.
  • Вы также можете указать значения отдельно, например, используя border-top-left-radius.
1border-radius: 50px / 25px;
  • Свойство border-radius также позволяет задавать отдельные вертикальные и горизонтальные радиусы, чтобы сделать углы эллиптическими. В этом случае значения разделяются с помощью /.
    • Например, указание 50px / 25px задает горизонтальный радиус 50 пикселей и вертикальный радиус 25 пикселей.

Резюме

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

Свойство outline 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

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

outline схож с border, но отличается в следующих аспектах:.

  • outline не влияет на модель коробки элемента, поэтому он не затрагивает его расположение.
  • Поскольку outline рисуется за пределами элемента, он отображается вне border.
  • border рисуется внутри элемента, поэтому он может влиять на его размер и размещение.

В этом примере свойство outline задано следующим образом:.

  • Класс outline-solid задает сплошной красный контур толщиной 2px.
  • Класс outline-dashed задает синий пунктирный контур толщиной 3px.
  • Класс outline-double задает зеленый двойной контур толщиной 4px.
  • Класс outline-offset задает расстояние в 10px между контуром и элементом.

Базовый синтаксис 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width задает толщину контура.
  • Вы можете указать конкретные значения, такие как thin, medium, thick, или использовать единицы измерения, такие как px, em.
outline-style
  • outline-style задает стиль контура.
  • Вы можете задать такие стили, как solid, dotted, dashed, double, groove, ridge, inset, outset, none и другие.
outline-color
  • outline-color задает цвет контура.
  • Вы можете указать любой цвет с помощью названий, HEX, RGB и т. д.
outline-offset
  • outline-offset задает расстояние между контуром и элементом.
  • Вы можете указать точные значения в таких единицах, как px, em и т. д.

Свойство box-shadow 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

Свойство box-shadow используется для добавления теней к элементам. Используя это свойство, вы можете создавать тени вокруг элементов, чтобы передать ощущение объема и глубины.

Объяснение:

  • В классе box-shadow-basic-shadow размытая черная тень отображается внизу справа от элемента.

  • В классе box-shadow-inset-shadow размытая тень отображается внутри элемента. С помощью внутренней тени можно создать утопленный дизайн.

  • В классе box-shadow-multiple-shadow к элементу применяются две тени: черная и красная. Так как тени отображаются в разных положениях, достигается трехмерный эффект.

Формат свойства box-shadow 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
Значение каждого параметра

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

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

Третий параметр радиус размытия определяет степень размытия тени. Чем больше значение, тем более размытой и широкой становится тень. Указание положительного значения размещает тень снизу, а отрицательного — сверху. Этот параметр необязателен, по умолчанию его значение — 0, что означает отсутствие размытия.

Четвертый параметр радиус растяжения определяет, насколько сильно распространяется тень. Положительное значение увеличивает тень, а отрицательное уменьшает её. Этот параметр также необязателен.

Пятый параметр цвет задает цвет тени. Цвета можно задавать с использованием цветовых названий, RGB, HEX, HSL и других цветовых моделей, доступных в CSS. Если параметр не указан, применяется цвет текста элемента (значение свойства color).

Также можно сначала указать ключевое слово inset. Указание ключевого слова inset позволяет отображать тень внутри элемента, а не снаружи. Можно также задать несколько теней, разделенных запятыми.

Пример использования box-shadow

Пример базовой тени 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • Горизонтальное смещение равно 10px, создавая тень на 10 пикселей вправо.
  • Вертикальное смещение равно 10px, создавая тень на 10 пикселей вниз.
  • Радиус размытия равен 5px, создавая размытость тени на 5 пикселей.
  • Цвет равен rgba(0, 0, 0, 0.5), создавая полупрозрачный черный цвет.
Пример внутренней тени 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • Использование inset создает тень внутри элемента.
Пример нескольких теней 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • Вы можете также задать несколько теней, разделяя их запятыми. В этом примере применены две тени: черная и красная.

Резюме

  • box-shadow — это свойство, которое используется для добавления теней к элементам, создавая ощущение глубины.
  • Комбинируя горизонтальное и вертикальное смещение, размытие, радиус распространения и цвет, можно добиться разнообразных эффектов.
  • Вы можете создавать тени внутри элемента с помощью inset, а также задавать сразу несколько теней.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Свойства CSS, связанные с фономСвойства CSS, связанные с списками