cienie w pudełku css3 tylko w jednym kierunku?

Question

Mam element, który ma cienie w formie wstawki, ale chcę cień tylko na górze.

Czy nie można ustawić tylko górnego cienia? Czy muszę uciekać się do tworzenia dodatkowych elementów nakładających się na boczne cienie?

Answer 1

To jest technicznie taka sama odpowiedź jak @ChrisJ, z kilkoma więcej szczegółów na temat jak zrobić box-shadow wykonać rozkazy:

odsyłające _{te * elementy są opcjonalne}:

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>; 

Numer <spread-radius> musi być ujemny <blur-radius> (aby nie pojawił się żaden z niewyraźnych boków), a następnie trzeba podnieść <offset-y> dół o tę samą kwotę:

box-shadow: inset 0 20px 20px -20px #000000; 

To daje pojedynczy prążek gradientu w poprzek górnej części elementu.

Answer 2

box-shadow przesuwa cień o określoną kwotę w każdym kierunku. Tak więc potrzebujesz przesunięcia x na 0, a przesunięcia na y na coś negatywnego.

Dodatkowo musisz grać z rozmyciem i promieniem rozsyłu, aby cień nie był widoczny po lewej i prawej stronie.

przykład:

box-shadow: #777 0px -10px 5px -2px; 

Patrz opis na Mozilla Developer Network.

Answer 3

Lepszym sposobem byłoby użycie gradientu tła, tutaj są obie strony na bok.

http://jsfiddle.net/wh3L8/

Answer 4

Oto mały hack, który zrobiłem.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div> 

1. Create a <div class="one_side_shadow"></div> tuż poniżej elementu, który chcę, aby utworzyć pole cień jednego boku (w tym przypadku chcę jednostronna wkładka cień na id="element" pochodzący z dołu)

2. Następnie utworzyłem zwykły cień w ramce, używając ujemnego przesunięcia w pionie, aby przesunąć cień w jedną stronę.

   box-shadow: 0 -8px 20px 2px # DEDEE3;

Answer 5

przykład:

box-shadow: 0 2px 0px 0px red inset; 

pierwszego parametru i drugiego parametru określa przesunięcie cień do osi x i y odpowiednio kierunku. Trzeci parametr określa odległość rozmycia. Wreszcie czwarty parametr określa odległość rozrzutu.

Podanie tylko drugiego parametru z wybranym offsetem daje górny cień bez cieni.

Demo można znaleźć tutaj: http://jsfiddle.net/rEdBy/

Bardzo ładny tutorial CSS3 Box cieni - http://www.css3.info/preview/box-shadow/

Answer 6

Może spróbuj box-shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

z przelewem-x:

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

użycie overflow-x: hidden; i box-shadow: 0px 10px 16px -10px #000;

Answer 7

Oto mój przykład spróbuj raz

-webkit-box-shadow: 0 8px 6px -6px black; 
-moz-box-shadow: 0 8px 6px -6px black; 
box-shadow: 0 8px 6px -6px black;