Я пытаюсь применить box-shadow
на всех четырех сторонах. У меня получилось только с двух сторон:
Как применить box-shadow со всех четырех сторон?
Ответы (12)
Это из-за смещения x и y. Попробуй это:
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
edit (год спустя ..): Сделал ответ более кроссбраузерным, как просили в комментариях :)
кстати: в настоящее время существует много генераторов css3.. css3.me, css3maker, css3generator и т. д.
См.: 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;
}
Просто, как этот код:
box-shadow: 0px 0px 2px 2px black; /*any color you want*/
Это выглядит круто.
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
Поймите синтаксис box-shadow и напишите его соответствующим образом.
box-shadow: h-offset v-offset blur spread color;
h-offset: Горизонтальное смещение тени. Положительное значение помещает тень на правую сторону поля, отрицательное значение помещает тень на левую сторону поля — обязательно
v-offset: Вертикальное смещение тени. Положительное значение помещает тень под полем, отрицательное значение помещает тень над полем — обязательно
размытие: Радиус размытия (чем выше число, тем более размытой будет тень) — необязательно
цвет: Цвет тени - Необязательно
распространение: Радиус распространения. Положительное значение увеличивает размер тени, отрицательное значение уменьшает размер тени — необязательно.
вставка: изменяет тень с внешней тени на внутреннюю тень — необязательно
box-shadow: 0 0 10px #999;
box-shadow лучше работает с распространением
box-shadow: 0 0 10px 8px #999;
используйте «вставку», чтобы применить тень внутри коробки
box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;
используйте rgba (красный зеленый синий альфа) для более эффективной настройки тени
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);
Самое простое решение и самый простой способ — добавить тень для всех четырех сторон. CSS
box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
Я нашел ссылку 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);
}
CSS3 box-shadow: четырехсторонняя симметрия
- каждая сторона одного цвета
: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>
- каждая сторона разного цвета
: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>
скриншоты
судьи
https://css-tricks.com/almanac/properties/b/box-shadow/
https://www.cnblogs.com/xgqfrms/p/13264347.html
Используйте этот код css для всех четырех сторон: box-shadow: 0px 1px 7px 0px rgb(106, 111, 109);
Вы можете использовать различные комбинации по следующей ссылке.
https://www.cssmatic.com/box-shadow
Нужные вам результаты могут быть достигнуты с помощью следующего 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);
Используя (v1)px (v2)px (v3)px (v4)px в качестве примера. v1px, когда положительное значение дает тень справа, а отрицательное значение дает тень слева. v2px, когда положительное значение дает верхнюю боковую тень, а отрицательное значение дает нижнюю боковую тень. v3 используется для размытия теней. 10 пикселей сделают тень более размытой, чем 5 пикселей и т. д. Итак, используйте div (mydiv) со стилем ниже. Мы получим изображение ниже
box-shadow:
30px 0px 5px 0px red,
0px 30px 5px 0px blue,
-30px 0px 5px 0px green,
0px -30px 5px 0px yellow;
width:200px;
height:200px;
margin-left:100px;
}
<br><br>
<div class="mydiv"></div>
This should give you the div below
view the result from this link: https://i.stack.imgur.com/bUjRN.jpg
Добавьте эту строку в свой стиль окна.
box-shadow: 0 0 0 width color;
например:
box-shadow: 0 0 0 5px yellow;
Вы можете найти более подробную информацию здесь Веб-документы MDN — Установка нуля для смещения и размытия