Jak zastosować cienie box-shadow ze wszystkich czterech stron?

84

Próbuję zastosować a box-shadowze wszystkich czterech stron. Mogłem to dostać tylko z 2 stron:

css box-shadow ważka
źródło
2
CSS3please.com jest zawsze pomocna w tego rodzaju sprawach ...
sscirrus

Odpowiedzi:

144

Jest to spowodowane przesunięciem X i Y. Spróbuj tego:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

edytuj (rok później ..): Poprawiono odpowiedź w różnych przeglądarkach, zgodnie z prośbą w komentarzach :)

btw: obecnie istnieje wiele generatorów css3 .. css3.me , css3maker , css3generator itp.

Damb
źródło
1
+1, ponieważ szybciej otrzymałeś właściwą odpowiedź, chociaż wygląda to lepiej przy mniejszym promieniu i wartości rozrzutu.
trzydzieści kropek
1
Dzięki.
Patrzyłem
powinieneś zrobić swoją odpowiedź bardziej w różnych przeglądarkach.
Lucas
Nie wiem dlaczego, ale to nie działa. Kiedy tego używam, nie ma cienia w pudełku. Jeśli użyję odpowiedzi przesłanej przez @thirtydot, to działa. Musisz mieć rozmycie i rozprzestrzenianie się, jeśli pierwsze dwie wartości to 0. To dzieje się w Chrome.
Charles Williams
1
@thirtydot - Masz rację, na jaśniejszym tle widać to. Ale jeśli twoje tło jest czarne, w ogóle go nie widać. Więc chyba nie powinienem mówić, że to nie działa. Ale na pewno nie jest to widoczne bez rozłożenia, gdy masz czarne tło, niezależnie od koloru cienia boxu. Nawet w przypadku koloru czerwonego wydaje się, że obramowanie jest lekko czerwone, ale nie ma „widocznego” cienia ramki. Więc jeśli masz jaśniejsze tło, myślę, że to rozwiązanie zadziała. W przypadku bardzo ciemnego tła to rozwiązanie nie jest niezawodne. jsfiddle.net/vkzd71rc vs jsfiddle.net/vkzd71rc/1
Charles Williams
35

Zobacz: http://jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}
trzydzieści kropek
źródło
Wiem, do czego służy każda wartość w cieniu pudełka z 3 wartością + kolor. co oznacza ta wartość 4?
ważka
1
Przeczytaj: developer.mozilla.org/En/CSS/Box-shadow - konkretnie jest to „promień rozprzestrzeniania”.
trzydzieści kropek
Twórca skrzypiec - MVP.
Terrance 00
10

To wygląda fajnie.

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
Nalan Madheswaran
źródło
10

Tak proste, jak ten kod:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/
Pankskie
źródło
5

Najprostszym rozwiązaniem i najłatwiejszym sposobem jest dodanie cienia dla wszystkich czterech stron. CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
Huzaif Sayyed
źródło
5

Zrozum składnię box-shadow i zapisz ją odpowiednio

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

H-offset: Poziome przesunięcie cienia. Wartość dodatnia umieszcza cień po prawej stronie pudełka, wartość ujemna umieszcza cień po lewej stronie pudełka - wymagane

v-offset: Pionowe przesunięcie cienia. Wartość dodatnia umieszcza cień pod ramką, a wartość ujemna umieszcza cień nad ramką - wymagane

rozmycie: promień rozmycia (im wyższa liczba, tym bardziej rozmyty będzie cień) - opcjonalnie

kolor: kolor cienia - opcjonalnie

spread: promień rozrzutu. Wartość dodatnia zwiększa rozmiar cienia, a wartość ujemna zmniejsza rozmiar cienia - opcjonalne

inset: Zmienia cień z cienia zewnętrznego na cień wewnętrzny - opcjonalnie

box-shadow: 0 0 10px #999;

box-shadow działa lepiej z spreadem

box-shadow: 0 0 10px 8px #999;

użyj „wstawki”, aby zastosować cień wewnątrz pudełka

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

użyj rgba (czerwony, zielony, niebieski alfa), aby efektywniej dostosować cień

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);
Seshu Vuggina
źródło
2

Znalazłem witrynę http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ .

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
user3619130
źródło
1
jest to właściwe, tak jak inne odpowiedzi w tej witrynie, ale ponieważ starasz się, głosuję na twoją odpowiedź.
blueray
1

CSS3 box-shadow: symetria 4 stron

  1. z każdej strony w tym samym kolorze

:root{
  --color: #f0f;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #ccc;
}

.four-sides-with-same-color {
  box-shadow: 0px 0px 10px 5px var(--color);
}
<div class="four-sides-with-same-color"></div>
Rozwiń fragment

  1. z każdej strony w innym kolorze

:root{
  --color1: #00ff4e;
  --color2: #ff004e;
  --color3: #b716e6;
  --color4: #FF5722;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background-color: rgba(255,255,0,0.7);
}

.four-sides-with-different-color {
  box-shadow: 
    10px 0px 5px 0px var(--color1),
    0px 10px 5px 0px var(--color2),
    -10px 0px 5px 0px var(--color3),
    0px -10px 5px 0px var(--color4);
}
<div class="four-sides-with-different-color"></div>
Rozwiń fragment

zrzuty ekranu

refs

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html

xgqfrms
źródło
0

Użyj tego kodu CSS dla wszystkich czterech stron: box-shadow: 0px 1px 7px 0px rgb (106, 111, 109);

Bal mukund kumar
źródło
0

Możesz różne kombinacje pod poniższym linkiem.
https://www.cssmatic.com/box-shadow

Wyniki, których potrzebujesz, można osiągnąć za pomocą następującego kodu CSS

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
Ans
źródło