English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
рамка элемента (Border) окружает заполнение и содержимое.
Атрибуты CSS рамки позволяют определить область рамки рамки. Рамка может быть предопределенным стилем, например сплошной, двойной, пунктирной и т.д.также может быть изображением. В следующем разделе будет рассмотрено, как устанавливать различные атрибуты для определения стиля рамки (border-style), цвета (border-color) и толщины (border-width).
border-widthАтрибут определяет ширину области рамки. Это шорткат, позволяющий одновременно устанавливать толщину всех четырех сторон рамки.
p {
border-width: medium 10px thick 15px;
}Проверьте, посмотри‹/›Обратите внимание:Если border-width отсутствует или не указан значением атрибута, border-width будет использовать значение по умолчанию (medium).
Этоborder-styleАтрибут устанавливает стиль рамки рамки, например: solid, dotted и т.д. Это краткое обозначение атрибута, используемого для установки типа линии всех четырех сторон рамки.
Атрибут border-style может принимать одно из следующих значений: none, hidden, dashed, dotted, double, groove, inset, outset, ridge и solid.
none: нет границ.
dotted: определяет пунктирную рамку
dashed: определяет пунктирную рамку
solid: определяет сплошную рамку
double: определяет два рамки. Ширина рамок одинакова с значением border-width
groove: определяет рамку 3D в виде желобка. Эффект зависит от значения цвета рамки
ridge: определяет рамку 3D в виде гребня. Эффект зависит от значения цвета рамки
inset: определяет嵌入式 рамку 3D. Эффект зависит от значения цвета рамки
outset: определяет начальную рамку 3D. Эффект зависит от значения цвета рамки
p {
border-style: dotted;
}Проверьте, посмотри‹/›Этоborder-colorСвойство определяетcolorРамка рамки. Это также используется для установки цвета рамки всех четырех сторон элемента в кратком виде.
p {
border-style: solid;
border-color: #ff0000;
}Проверьте, посмотри‹/›Обратите внимание:border-color Если это свойство используется в孤立, оно не действует. Сначала установите рамку с помощью свойства border-style.
Этоborder Свойства CSS — это сжатые свойства, устанавливающие один или несколько отдельных свойств рамки border-style, border-width и border-color в одном правиле.
p {
border: 5px solid #ff4500;
}Проверьте, посмотри‹/›Если при установке сжатого свойства border игнорируется или не указывается значение одного из свойств border, то будет использоваться значение по умолчанию для этого свойства (если оно есть).
Обратите внимание:border-colorЕсли для элемента отсутствует значение свойства или не указан свойство (например, border: 5px solid;), то у этого элементаcolorСвойство используется в качестве значения border-color.
В этом примере рамка будет иметь черную черту с шириной 5px:
p {
color: black;
border: 5px solid;
}Проверьте, посмотри‹/›Однако, в случае отсутствия значения border-style, рамка не будет отображаться, так как значение по умолчанию для свойства border-style — none.
В следующем примере у нас не будет рамки:
p {
border: 5px #00ff00;
}Проверьте, посмотри‹/›