CSS Box Shadow - CSS-трикове

Anonim

Използва се при хвърляне на сенки от елементи на ниво блок (като divs).

.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-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 Docs
  • Множество граници с box-shadow.