Как добавить двойную рамку с разными цветами?
Чтобы добавить двойную рамку к любой фигуре с помощью CSS, :до селектор известен. Он изменяет цвета обеих границ, чтобы сделать их уникальными. Пошаговая процедура, представленная ниже, чтобы добавить двойную рамку разных цветов:
Шаг 1: Добавьте элемент Div и назначьте классы
В файле HTML добавьте элемент div внутри тега
и назначьте « сорт » под названием « двойная граница ». Пользователи также могут создать собственное имя класса:< див сорт '=' 'двойная граница' >
< / див >
Шаг 2: Создайте тег стиля
На этом шаге создайте часть для класса « двойная граница ” и сделайте его в одной копии с “ :до селектор. Таким образом, свойства CSS будут применены к нашим классам:
< стиль >
.двойной- граница {
}
.двойной- граница :до {
}
< / стиль >
Шаг 3: Добавьте стили в класс
Свойства CSS применяются к элементу div, который имеет класс « двойная граница ». Ниже перечислены следующие стили:
.двойной- граница {
фон- цвет : #cc;
граница : 4 пикселя сплошного зеленого цвета;
отступ: 50 пикселей;
ширина : 16 пикселей;
высота : 16 пикселей;
положение: родственник;
допуск: 0 авто;
}
Описание свойств CSS приведено ниже:
- Сначала добавьте « фоновый цвет ” который серый и “ граница ” толщиной 4 пикселя и зеленым цветом.
- “ набивка ” размером 50 пикселей, чтобы создать внутреннее пространство размером 50 пикселей со всех сторон.
- В итоге « ширина ' и ' высота' 16px. Так же ' допуск ” равно 0 auto, что означает, что верхнее и нижнее поля будут нулевыми и левыми.
Веб-страница выглядит так:
Вывод показывает, что граница применяется к «div».
Шаг 4: Добавление селектора CSS
Теперь перейдите ко второму полю в теге стиля, у которого есть « :до », и напишите следующий код:
.двойной- граница :до {фон : никто;
граница : 4 пикселя сплошного синего цвета;
содержание : '' ;
положение: абсолютное;
верх: 4px;
слева: 4px;
справа: 4 пикселя;
внизу: 4px;
}
Свойства объясняются ниже:
- Использовать ' позиция », чтобы сделать положение элемента фиксированным.
- После этого « сверху, слева, справа и снизу ” определяет отступ вновь созданного элемента от исходного.
- Селектор CSS под названием «: до ” добавляет содержимое перед выбранным элементом.
Вывод выглядит так:
Вот как можно добавить двойную границу, используя разные цвета.
Заключение
Чтобы добавить двойную границу, сначала создайте элемент div и назначьте его классу. Затем добавьте CSS « позиция », которое должно быть установлено в относительный. После этого добавьте к нему селектор CSS «:before», чтобы пользователи могли добавлять контент перед выбранным элементом. В этом руководстве показано использование двойных рамок различных цветов.