CSS Box Shadow - CSS-Tricks

Anonim

Używany do rzucania cieni z elementów blokowych (takich jak elementy 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. Poziome przesunięcie cienia, dodatnie oznacza, że ​​cień będzie po prawej stronie ramki, a ujemne przesunięcie spowoduje umieszczenie cienia po lewej stronie pudełka.
  2. Pionowe przesunięcie cienia, ujemne oznacza, że ​​cień pudełka będzie nad prostokątem, a dodatnie oznacza, że ​​cień będzie poniżej pudełka.
  3. Promień rozmycia (opcjonalnie), jeśli ustawiony na 0 cień będzie ostry, im wyższa liczba, tym bardziej będzie rozmazany.
  4. Promień rozprzestrzeniania (opcjonalnie), wartości dodatnie zwiększają rozmiar cienia, wartości ujemne zmniejszają rozmiar. Wartość domyślna to 0 (cień ma taki sam rozmiar jak rozmycie).
  5. Kolor

Przykład

Wewnętrzny cień

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

Przykład

Cień okna programu Internet Explorer

Potrzebujesz dodatkowych elementów…

 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; )

Tylko jednostronne

Używając ujemnego promienia rozprzestrzeniania się, możesz wycisnąć cień pudełka i wypchnąć go tylko z jednej krawędzi pudełka.

.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; )

Związane z

  • CSS3: wartość rozłożenia i cień pola tylko z jednej strony
  • Dokumenty Mozilli
  • Wiele granic z box-shadow.