Да, мы знаем: мы можем установить ширину границы.
Тем не менее, вы когда -нибудь предполагали, что можете установить отдельный цвет для каждой границы 1PX? Что это за концепция? То есть, если вы установите границу 10px для элемента, то вы можете установить 10 цветов для этой 10px -границы. Каждый 1px является слоем (группа). Демонстрация: подробное объяснение нескольких наборов пограничных цветов в границе CSS3
Ну, давайте рассмотрим, как установить размер границы для элементов (блок кода 1):
Приведенный выше код указывает на то, что мы определили границу 6px для элемента Div с тестированием класса.
Следовательно, этот код CSS может быть на самом деле переработан (кодовый блок 2):
Через утонченный код мы обнаружили, что мы можем установить цвета для четырех сторон прямоугольника.
Когда вы запускаете изысканный код (конечно, вы можете изменить цвет каждой стороны), вы видите прямоугольник с черной границей 6PX. Ну, это то, что мы ожидаем.
Тем не менее, теперь мы можем разделить границу 6px на 6 групп, каждая 1PX - одна группа, поэтому каждая граница может быть установлен на 6 различных цветов.
Как это сделать? Посмотрите (блок кода три):
.тест{
ширина границы: 6px;
стиль границы: сплошной;
пограничный цвет: #000 #fff #999 #AAA #CCC #EEE;
границы-правые цвета: #000 #fff #999 #AAA #CCC #EEE;
Border-Bottom-Colors: #000 #FFF #999 #AAA #CCC #EEE;
Пограничные полосы: #000 #fff #999 #AAA #CCC #EEE;
}
.тест{
ширина границы: 6px;
стиль границы: сплошной;
пограничный цвет:#000;
граница-правый-цвет:#000;
цвет нижней границы: # 000;
Пограничный левый цвет:#000;
}
.тест{
Граница: 6px solid #000;
}