Próbuję zastosować a box-shadowze wszystkich czterech stron. Mogłem to dostać tylko z 2 stron:
Jak zastosować cienie box-shadow ze wszystkich czterech stron?
Odpowiedzi:
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.
+1, ponieważ szybciej otrzymałeś właściwą odpowiedź, chociaż wygląda to lepiej przy mniejszym promieniu i wartości rozrzutu.
—
trzydzieści kropek
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
@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
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;
}
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
Przeczytaj: developer.mozilla.org/En/CSS/Box-shadow - konkretnie jest to „promień rozprzestrzeniania”.
—
trzydzieści kropek
Twórca skrzypiec - MVP.
—
Terrance 00
To wygląda fajnie.
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
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*/
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);
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);
}
jest to właściwe, tak jak inne odpowiedzi w tej witrynie, ale ponieważ starasz się, głosuję na twoją odpowiedź.
—
blueray
CSS3 box-shadow: symetria 4 stron
- 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>
- 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>zrzuty ekranu
refs
Użyj tego kodu CSS dla wszystkich czterech stron: box-shadow: 0px 1px 7px 0px rgb (106, 111, 109);
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);