Jak stworzyć cień tylko po jednej stronie elementu?

Czy istnieje sposób, aby zrzucić cień tylko na spód ?. Mam menu z 2 obrazkami obok siebie. Nie chcę odpowiedniego cienia, ponieważ nakłada się on na właściwy obraz. Nie lubię do tego używać obrazów, więc istnieje sposób, aby upuścić go tylko na dole, na przykład:

box-shadow-bottom: 10px #FFF; lub podobne?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

AKTUALIZACJA 4

To samo co aktualizacja 3, ale z nowoczesnym css (= mniej reguł), dzięki czemu nie jest wymagane specjalne pozycjonowanie na pseudoelemencie.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

AKTUALIZACJA 3

Wszystkie moje poprzednie odpowiedzi wykorzystywały dodatkowe znaczniki, aby uzyskać ten efekt, który niekoniecznie jest potrzebny. Myślę, że to znacznie czystsze rozwiązanie ... jedyną sztuczką jest zabawa z wartościami, aby uzyskać właściwe ustawienie cienia, a także odpowiednią siłę / krycie cienia. Oto nowe skrzypce, wykorzystujące pseudoelementy :

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

<div id="box" class="box-shadow"></div>

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

AKTUALIZACJA 2

Najwyraźniej możesz to zrobić za pomocą dodatkowego parametru w CSS-cieniu, jak wszyscy inni właśnie zauważyli. Oto demo:

http://jsfiddle.net/K88H9/821/

CSS

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

To byłoby lepsze rozwiązanie. Dodany dodatkowy parametr jest opisany jako:

Czwarta długość to odległość rozrzutu. Wartości dodatnie powodują, że kształt cienia rozszerza się we wszystkich kierunkach o określony promień. Wartości ujemne powodują kurczenie się kształtu cienia.

AKTUALIZACJA

Sprawdź wersję demo na jsFiddle: http://jsfiddle.net/K88H9/4/

To, co zrobiłem, to stworzenie „elementu cienia”, który ukryłby się za faktycznym elementem, który chciałbyś mieć cień. Sprawiłem, że szerokość „elementu cienia” była dokładnie mniejsza niż rzeczywisty element o 2 razy większy niż określony cień; potem wyrównałem to poprawnie.

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

Oryginalna odpowiedź

Tak, możesz to zrobić przy użyciu tej samej składni, którą podałeś. Pierwsza wartość steruje pozycjonowaniem poziomym, a druga wartość steruje pozycjonowaniem pionowym. Więc po prostu ustaw pierwszą wartość, 0pxa drugą dowolne przesunięcie, jakie chcesz:

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

Aby uzyskać więcej informacji na temat cieni, sprawdź te:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

Mam nadzieję, że to pomoże.

Wystarczy użyć parametru spread, aby zmniejszyć cień:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

Demo na żywo: http://dabblet.com/gist/a8f8ba527f5cff607327

Aby nie widzieć cienia po bokach, (wartość bezwzględna) promienia rozproszenia (czwarty parametr) musi być taki sam jak promień rozmycia (trzeci parametr).

Jeśli masz ustalony kolor tła, możesz ukryć efekt cienia bocznego za pomocą dwóch cieni maskujących o tym samym kolorze tła i rozmycia = 0, przykład:

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

Zwróć uwagę, że czarny cień musi być ostatni i ma ujemną rozpiętość (-3px), aby zapobiec jego wysunięciu poza rogi.

Oto skrzypce (zmień kolor cieni maskujących, aby zobaczyć, jak to naprawdę działa).

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

Myślę, że o to ci chodzi?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

Zawsze lepiej jest przeczytać specyfikację . Nie ma żadnej box-shadow-bottomwłasności, a jak zauważa Lea, zawsze należy umieszczać nieprefiksowaną właściwość na dole, za prefiksami.

Więc jest to:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

Co powiesz na użycie zawierającego div, który ma ustawioną opcję przepełnienia ukrytą i wypełnienie u dołu? To wydaje się być najprostszym rozwiązaniem.

Przykro mi to mówić, że sam o tym nie myślałem, ale widziałem to gdzie indziej .

Używając elementu do zawinięcia elementu, uzyskuje się cień-pudełko i przelew: ukryty na opakowaniu, możesz sprawić, że dodatkowy cień-pudełko zniknie i nadal będzie miał użyteczną ramkę. To rozwiązuje również problem, w którym element jest mniejszy, jak się wydaje, ze względu na rozkład.

Lubię to:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

Treść idzie tutaj

Wciąż sprytne rozwiązanie, gdy trzeba to zrobić w czystym CSS!

Jak powiedział Jorgen Evens .

Możesz także użyć clip-pathdo przycinania (ukrywania) wszystkich przelewających się krawędzi, ale tej, którą chcesz pokazać:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

Zobacz clip-path (MDN) . Argumenty do polygonto : lewy górny punkt, prawy górny punkt, prawy dolny punkt i lewy dolny punkt. Ustawiając dolną krawędź na 200%(lub dowolną liczbę większą niż 100%), ograniczasz przepełnienie tylko do dolnej krawędzi.

Potrzebowałem też cienia, ale tylko pod obrazem i ustawiłem lekko w lewo i prawo. To działało dla mnie:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

Elementem, do którego się to stosuje, jest obraz na całej stronie (980px x 300px).

Jeśli pomaga to w majstrowaniu przy ustawieniach, działają one w następujący sposób:

cień poziomy, cień pionowy, odległość rozmycia, rozkład (tj. rozmiar cienia) i kolor.

Lepiej sprawdzić cień:

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

ten kod jest obecnie używany w sieci Stackoverflow.

To pióro kodowe (nie przeze mnie) pokazuje bardzo prosty sposób na zrobienie tego i innych stron samemu całkiem nieźle:

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

Jeśli tło jest solidne (lub możesz je odtworzyć za pomocą CSS), możesz użyć gradientu liniowego w ten sposób:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

To wygeneruje gradient 5px na dole elementu, od czarnego przy 30% kryciu do całkowicie przezroczystego. Reszta elementu ma białe tło. Oczywiście, zmieniając ostatnie 2 punkty przejścia koloru gradientu liniowego, można uczynić tło całkowicie przezroczystym.

Możesz także zrobić gradient na dole - było to dla mnie pomocne, ponieważ cień, którego chciałem, znajdował się na elemencie, który był już półprzezroczysty, więc nie musiałem się martwić o przycięcie:

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

Po prostu dopasuj właściwości „bottom” i „height” i ustaw wartości rgba na dowolne, aby były na górze / na dole cienia

Możesz to zrobić w następujący sposób:

Ogólna składnia:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

Przykład: chcemy zrobić cień w dolnym polu z kolorem czerwonym,

więc aby to zrobić, musimy ustawić wszystkie opcje boków, w których musimy ustawić opcje cienia dolnego pola i ustawić wszystkie pozostałe tak puste, jak poniżej:

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

zaktualizuj swoją odpowiedź dla kogoś innego, zamiast przezroczystych stron, zamiast białego, aby działał również na innych kolorach tła.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

Wewnętrzny cień

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>