Разработчики могут применять несколько свойств CSS, чтобы сделать свои веб-страницы более привлекательными, например « высота ' и ' ширина ” свойства для настройки размера, “ выравнивание текста ” для корректировки текста, “ бордюрный стиль ' и ' радиус границы » свойства для установки границы вокруг элемента. Кроме того, вы можете добавить границу в соответствии с вашими требованиями, например, на одной стороне элемента, только чтобы сделать объекты позади объектов более заметными.
Этот пост продемонстрирует:
Способ 1: установить границу с одной стороны
В CSS пользователи могут установить границу с одной стороны нужного элемента. С этой целью « пограничный левый », « граница справа », « верхняя граница ' и ' нижняя граница ” используются для добавления границ слева, справа, сверху или снизу.
В этом разделе мы специально установим границу с левой стороны контейнера. Для этого следуйте приведенным ниже инструкциям.
Шаг 1: Создайте контейнер div
Сначала создайте контейнер div с помощью команды « <дел> ' ярлык. Вставьте « идентификатор ” и присвойте идентификатору имя.
Шаг 2: Вставьте заголовок
Затем используйте «< h1> », чтобы добавить заголовок внутри контейнера div. Кроме того, вы также можете использовать другие теги заголовков в соответствии с требованиями, например «< h1> ' до '< h6> » теги:
< див идентификатор '=' 'main-div' >< h1 > Граница с одной стороны h1 >
див >
Видно, что контейнер успешно создан:
Шаг 3: Доступ к контейнеру div
Теперь откройте контейнер HTML div и получите доступ к имени класса. Для этого селектор класса « # ” используется с именем класса.
Шаг 4: Вставьте границу только с одной стороны
После доступа к контейнеру div примените указанные ниже свойства CSS:
#main-div{граница слева: 5px сплошная красный ;
фон:rgb ( 56 , 239 , 245 ) ;
поля: 20px 100px;
ширина: 200 пикселей; высота: 150 пикселей
}
Здесь:
-
- “ пограничный левый является сокращенным свойством для установки ширины, стиля и цвета границы слева.
- “ фон ” используется для настройки цвета фона элемента.
- “ допуск ” свойства устанавливают пространство за пределами границы.
- “ ширина ” определяет размер ширины элемента в контейнере.
Полученное изображение показывает границу только с одной стороны:
Способ 2: установите границу со всех сторон с разными стилями
Чтобы установить границу со всех сторон разными цветами, используйте приведенный выше HTML-код. Затем получите доступ к контейнеру div с помощью имени идентификатора и селектора:
#main-div{поле: 80 пикселей;
ширина границы: 8px 2px 1px 10px;
радиус границы: 50 пикселей;
стиль границы: сплошная вставка с двойной точкой;
цвет границы: rgb ( 40 , 5 , 235 ) RGB ( 238 , 146 , 9 ) RGB ( 255 , 0 , 242 ) RGB ( 19 , 19 , 18 ) ;
}
В приведенном выше коде:
-
- “ допуск ” указывает пустое пространство за пределами элемента.
- “ ширина рамки ” устанавливает ширину с разными значениями для каждой стороны. Например, мы добавили разные значения в пикселях.
- “ радиус границы ” используется для создания круглой кривой границы.
- “ бордюрный стиль ” используется для установки стиля границы. В этом сценарии для каждой стороны границы задаются четыре различных типа стилей.
- “ цвет границы ” используется для выделения цвета границы. Здесь значение для каждой стороны задается разным цветом.
В результате будет применена граница с разными стилями с каждой стороны:
В этой статье вы узнали о различных способах установки границы CSS с одной и нескольких сторон.
Заключение
Чтобы установить границу только с одной стороны, сначала создайте div, используя « <дел> элемент. Затем откройте контейнер div и примените свойства CSS. После этого используйте любое свойство среди этих, в том числе « пограничный левый », « граница справа », « верхняя граница ' и ' нижняя граница », чтобы установить одну боковую границу. Кроме того, пользователи также могут установить « ширина рамки », « бордюрный стиль ' и ' цвет границы отдельно с каждой стороны границы. В этом посте объясняется метод установки границы CSS только с одной стороны.