Перед вами рамочка, имеющая 4 слоя. Три первых слоя заданы через адрес фона, причем первый и третий одинаковые. Четвертый слой задан через цвет фона. В каждом слое предусмотрен отступ от края для каждого следующего слоя через свойство padding. Сначала 5px, потом 4px, потом снова 5px. Предусмотрены три тени через свойство box-shadow. Все три тени по вертикали, но разного размера (-3px,3px,7px), разного цвета и разной степени размытости. Свойство box-shadow добавляет тень вокруг элемента — внутри или снаружи. В зависимости от того, какую тень вы создадите, элемент будет казаться объёмным или глубоким. inset — ключевое слово, которое указывает, что тень должна располагаться внутри элемента, а не снаружи. Положительное значение смещения по горизонтали смещает тень вправо, отрицательное — влево. Положительное значение смещения по вертикали смещает тень вниз, отрицательное — вверх. Третье значение - радиус размытия тени. Чем больше значение, тем сильнее сглаживаются края тени, она становится шире и светлее.
Уберем аккуратно из кода рамочки всё, создающее три тени, и посмотрим на рамочку.
|
|