Ответ 1
Только случай:
<h3 style="background-color:red; padding:2% 0 2% 0; border-top:5px solid green; border-bottom: 5px solid green;">
This is a header
</h3>
Я использую тег HTML DIV для форматирования моего заголовка с рамкой:
<h3 style="background-color:red; padding:2% 0 2% 0; border:5px solid green">
This is a header
</h3>
Однако, я хотел бы, чтобы рамка отображалась только сверху и снизу, но не слева и справа. Я бы хотел, чтобы граница была такой же, как и для верхнего левого нижнего и правого, но граница не имеет этой функции (или я не знаю?). Есть ли способ в стиле CSS сделать это?
Только случай:
<h3 style="background-color:red; padding:2% 0 2% 0; border-top:5px solid green; border-bottom: 5px solid green;">
This is a header
</h3>
Для дальнейшего использования ниже приведен альтернативный метод, который позволяет избежать более одного раза определять свойства границы (цвет, ширина) и разрешать декларации, аналогичные объявлениям, используемым для поля и заполнения (по запросу).
border: 5px green;
border-style: solid none;
Как и при отступке или отступе, border-style
определяется в порядке сверху, справа, внизу, слева. В приведенном выше случае применяется сплошная граница сверху и снизу элемента и без границы слева или справа от элемента.
Использование этого метода позволяет избежать создания избыточности в объявлении.
border-top: 5px solid green; border-bottom: 5px solid green;
Вы должны поместить этот стиль непосредственно в <h3>
, а не обертывать div вокруг него.
Вы можете использовать следующее в своем теге css или style....
#div-id {
width: 100px;
height: 50px;
border-style: solid;
border-width: 1px 0;
border-color: #000;
}
Используя селектор ширины границы, вы можете определить толщину границы. Значения вставляются в верхнюю, правую, нижнюю, левую позиции, а сокращенная версия - верхняя/нижняя и правая/левая, что и я.
Например, вы можете установить div с верхней границей 4px, правой границей 3px, нижней границей 2px и левой границей 1px со следующим: border-width: 4px 3px 2px 1px;
Вы можете установить верхнюю и нижнюю границы в 3px, а левую и правую границы - 1 px со следующими параметрами: border-width: 3px 1px;
Вы можете указать border-right
border-left
... отдельно.
Вы можете использовать свойства border-left
, border-right
, border-top
и border-bottom
для создания разных стилей границ с каждой стороны вашего контейнера.
В вашем случае вы хотите применить свой стиль к border-top
и border-bottom
.
Вы можете указать границу следующим образом:
<h3 style="background-color:red; padding:2% 0 2% 0;
border-top:5px solid green; border-bottom:5px solid green">
This is a header
</h3>