8.1 Свойство border
Рамки — важный аспект веб-дизайн. Они позволяют выделять элементы и улучшать визуальное восприятие страницы. CSS предоставляет множество свойств для создания и стилизации рамок. Рассмотрим основные свойства рамок, включая компактную и полную запись, а также свойства для задания ширины, стиля, цвета и скругленных углов рамок.
Основные параметры
Основные параметры рамки можно задавать с использованием отдельных свойств: border-width, border-style и border-color.
Синтаксис:
element {
border-width: width;
border-style: style;
border-color: color;
}
Пример использования:
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
Компактная запись
Свойство border позволяет задать все основные параметры рамки (ширину, стиль и цвет) в одной строке.
Синтаксис:
element {
border: width style color;
}
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
<body>
<div class="border-compact">Компактная запись</div>
<div class="border-full">Полная запись</div>
</body>
8.2 Ширина рамки: border-width
Свойство border-width задает ширину рамки. Значения можно задать в пикселях (px), точках (pt), процентах (%) или ключевыми словами (thin, medium, thick).
Синтаксис:
element {
border-width: width;
}
Пример:
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
<body>
<div class="border-thin">Тонкая рамка</div>
<div class="border-medium">Средняя рамка</div>
<div class="border-thick">Толстая рамка</div>
<div class="border-custom">Рамка шириной 5px</div>
</body>
8.3 Стиль рамки: border-style
Описание:
Свойство border-style задает стиль рамки. Варианты стилей включают:
none: без рамкиsolid: сплошная линияdotted: пунктирная линияdashed: штриховая линияdouble: двойная линияgroove: рамка в виде канавкиridge: рамка в виде гребняinset: вдавленная рамкаoutset: выпуклая рамка
Синтаксис:
element {
border-style: style;
}
Пример:
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
<body>
<div class="border-none">Без рамки</div>
<div class="border-solid">Сплошная линия</div>
<div class="border-dotted">Пунктирная линия</div>
<div class="border-dashed">Штриховая линия</div>
<div class="border-double">Двойная линия</div>
<div class="border-groove">Канавка</div>
<div class="border-ridge">Гребень</div>
<div class="border-inset">Вдавленная рамка</div>
<div class="border-outset">Выпуклая рамка</div>
</body>
8.4 Цвет рамки: border-color
Свойство border-color задает цвет рамки. Цвет может быть указан в различных форматах: названия цветов, шестнадцатеричные коды, RGB, RGBA, HSL, HSLA.
Синтаксис:
element {
border-color: color;
}
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
<body>
<div class="border-red">Красная рамка</div>
<div class="border-blue">Синяя рамка</div>
<div class="border-green">Зеленая рамка</div>
<div class="border-rgba">Полупрозрачная красная рамка</div>
</body>
8.5 Скругленные углы с border-radius
Свойство border-radius позволяет округлять углы элементов, создавая закругленные рамки. Оно может применяться ко всем четырем углам одновременно или к каждому углу по отдельности.
Синтаксис:
element {
border-radius: radius;
}
Значения:
- Единое значение: например,
border-radius: 10px;— задает одинаковый радиус закругления для всех углов - Два значения: например,
border-radius: 10px 20px;— первое значение для верхних левых и нижних правых углов, второе — для верхних правых и нижних левых углов - Четыре значения: например,
border-radius: 10px 20px 30px 40px;— задает радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов соответственно - Смешанные значения: радиусы можно задавать в процентах, что позволяет адаптировать закругление под размеры элемента
Пример:
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
<body>
<div class="radius-all">Закругление всех углов</div>
<div class="radius-top">Закругление верхних углов</div>
<div class="radius-bottom">Закругление нижних углов</div>
<div class="radius-mixed">Смешанное закругление углов</div>
</body>
.radius-all: применяет одинаковый радиус закругления (15px) ко всем углам.radius-top: применяет закругление (20px) только к верхним угла.radius-bottom: применяет закругление (25px) только к нижним углам.radius-mixed: применяет разные значения радиуса к каждому углу
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ