CSS Box Shadow - CSS-хитрости

Anonim

Используется для отбрасывания теней от блочных элементов (например, div).

.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )
  1. Горизонтальное смещение тени, положительное означает, что тень будет справа от поля, отрицательное смещение поместит тень слева от поля.
  2. Вертикальное смещение тени: отрицательное означает, что тень будет над прямоугольником, положительное означает, что тень будет ниже прямоугольника.
  3. Радиус размытия (необязательно): если установлено значение 0, тень будет резкой, чем выше число, тем более размытой она будет.
  4. Радиус распространения (необязательно), положительные значения увеличивают размер тени, отрицательные значения уменьшают размер. По умолчанию - 0 (размер тени такой же, как у размытия).
  5. Цвет

Пример

Внутренняя тень

.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )

Пример

Internet Explorer Box Shadow

Вам нужны дополнительные элементы…

 Box-shadowed element 
.shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); box-shadow: 5px 5px 5px rgba(68,68,68,0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )

Только с одной стороны

Используя отрицательный радиус распространения, вы можете сжать тень коробки и оттолкнуть ее только от одного края коробки.

.one-edge-shadow ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )

Связанный

  • CSS3: значение распространения и тень блока только с одной стороны
  • Документы Mozilla
  • Множественные границы с box-shadow.