Як застосувати поле-тінь з усіх чотирьох сторін?


84

Я намагаюся застосувати a box-shadowз усіх чотирьох сторін. Я міг отримати його лише з двох сторін:


2
CSS3please.com завжди корисний для такого роду речей ...
sscirrus

Відповіді:


139

Це через зміщення x та y. Спробуйте це:

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

редагувати (рік пізніше ..): Зробив відповідь більш крос-браузерним, як вимагали коментарі :)

До речі: сьогодні є багато генераторів css3 .. css3.me , css3maker , css3generator тощо ...


1
+1, тому що ви швидше отримали правильну відповідь, хоча вона виглядає краще з меншим радіусом і значенням розвороту.
тридцять пунктів

1
Дякую. Я дивився на вашу першу відповідь і думав, що я неправильно поставив запитання :)
Damb

ви повинні зробити свою відповідь більш крос-браузерною.
Лукас

Я не впевнений, чому, але це не працює для мене. Коли я використовую це, я не отримую жодної тіні. Якщо я використовую відповідь, опубліковану @thirtydot, тоді це працює. Ви повинні мати розмиття та розповсюдження, якщо перші два значення дорівнюють 0. Це відбувається в Chrome.
Чарльз Вільямс

1
@thirtydot - Ви маєте рацію, зі світлішим фоном ви можете це побачити. Але якщо тло чорне, ти взагалі його не бачиш. Тож, мабуть, не слід казати, що це не працює. Але це точно не видно без розвороту, коли у вас чорний фон, незалежно від кольору вікна-тіні. Навіть із червоним, здається, ваша межа трохи червона, але немає "видимої" тіні вікна. Отже, якщо у вас світліший досвід, то, мабуть, це рішення буде спрацьовувати. Для дуже темного фону це рішення не є надійним. jsfiddle.net/vkzd71rc проти jsfiddle.net/vkzd71rc/1
Чарльз Вільямс

34

Див .: 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;
}

Я знаю, для чого призначене кожне значення в тіні вікна з 3 значенням + кольором. що це 4 значення означає ??
бабка

1
Читайте: developer.mozilla.org/En/CSS/Box-shadow - зокрема, це "радіус поширення".
тридцять пунктів

Творець скрипок - MVP.
Terrance00



5

Найпростішим рішенням і найпростішим способом є додавання тіні для всіх чотирьох сторін. CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

5

Зрозумійте синтаксис 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); 

2

Я знайшов сайт 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);
}

1
це доречно, як і інші відповіді на цьому сайті, але, оскільки ви прагнете, я проголосую за вашу відповідь.
blueray

1

CSS3-тінь: 4-бічна симетрія

  1. кожна сторона з однаковим кольором

: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>

  1. кожна сторона з іншим кольором

: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



0

Ви можете різні комбінації за наступним посиланням.
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);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.