Использование CSS для границ не должно ограничиваться стандартными border:1px solid #000; Ниже я приведу более сложные случаи создания границ.
Вертикальное и горизонтальное закругление углов
Углы также можно закруглять только по горизонтали или по вертикали. Для этого используется 2 значения, разделенные ‘/’:
[codesyntax lang=»css» title=»CSS»]
img { border-radius: 50% / 15% /* горизонтальный радиус / вертикальный радиус */; }
[/codesyntax]
Результат будет таким:
Эти же стили можно записать и так:
[codesyntax lang=»CSS» title=»CSS»]
img{ border-top-left-radius: 15% 50%; border-top-right-radius: 15% 50%; border-bottom-right-radius: 15% 50%; border-bottom-left-radius: 15% 50%; }
[/codesyntax]
Если таким образом менять только одну пару противоположных углов, то можно получить эффект деформации.
Двойная граница с помощью outline
Для создания двойной границы можно использовать css-свойство outline:
[codesyntax lang=»css» title=»CSS»]
img { border: 10px solid #f00; outline: 10px solid #0f0; }
[/codesyntax]
Создание границ с помощью псевдоэлементов
[codesyntax lang=»css» title=»CSS»]
.box { width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; } /* Create two boxes with the same width of the container */ .box:after, .box:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box:after { border: 5px solid red; outline: 5px solid yellow; } .box:before { border: 10px solid blue; }
[/codesyntax]
В таком способе максимум — 4 границы. Если вам нужно больше границ, то используйте следующий способ.
Создание границ с помощью теней
Для создания множества границ для одного блока можно использовать css-свойство box-shadow:
[codesyntax lang=»css» title=»CSS»]
.box { border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; }
[/codesyntax]
На мой взгляд это наиболее предпочтительный способ создания нескольких границ, если конечно вы не верстаете под старые браузеры (там все решается вложенными элементами).
Источник: net.tutsplus.com
