CSS3 Box-Shadow Линейный градиент?

Question

Есть ли способ в CSS3 создать кросс-браузерную (например: Mozilla, Webkit и Opera) тень вставки, которая будет переходить с черного сверху на белый снизу?Самый близкий способ, который я нашел, это сделать только для внешней стороны тени один цвет, а затем перейти к другому цвету внутри, на этой странице: http://www.css3.info/preview/box-shadow/

Answer 1

Взгляните на это видео от Lea Verou .Раздел, на который я ссылаюсь, говорит о чем-то очень похожем, где вы используете градиенты фонового изображения, чтобы создать нечто вроде тени.Если я смогу найти хороший рабочий пример, я отправлю ответ, но это должно дать вам хорошее место для начала.Вы также можете сделать некоторые действительно крутые вещи, такие как box shadow curl с псевдоклассом :after, чтобы создать тень.нижняя часть окна и подчеркивание текста.Вам придется поиграться с этим (много, наверное), чтобы он выглядел так, как вы хотите, но у css есть действительно потрясающие функции (и их будет все больше и больше).

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background:
    radial-gradient(at 50% 0, black, transparent 70%),
    linear-gradient(0deg, black, transparent 50%) bottom;
  background-size: 100% 15px;
  background-repeat: no-repeat;
}

.underline {
    width: 6em;
    text-align:center;
    font-size:30px;
}

.underline:after {
    content: '\00a0';
    background-image:
      radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}

<div class="container">
  <div class="underline">Hello, world!</div>
</div>

Answer 2

Попробуйте использовать элемент: before, чтобы установить тень.

  .classname {
    &:before {
      content: '';
      position: absolute;
      display: none;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
      z-index: -1;
      background: linear-gradient(to bottom, red, blue);


    }

    &:hover {
      &:before {
        display: inline-block;
      }
    }
  }

Приведенный выше код является примером того, как настроить такой эффект при наведении.

Answer 3

Необходимы два деления:

1: с линейным градиентом + размытие:

.gr{/* Permalink - use to edit and share this gradient:         http://colorzilla.com/gradient-editor/#f2305a+0,fca832+100 */
background: #f2305a; /* Old browsers */
background: -moz-linear-gradient(left, #f2305a 0%, #fca832 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f2305a 0%,#fca832 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f2305a 0%,#fca832 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2305a', endColorstr='#fca832',GradientType=1 );  

filter:blur(10px);

height:200px;
}

2: поверх другого, содержание.

.zz {background:#fff;  position: relative; top:-200px;
height:200px;
}

Тогда:

<div class='gr'></div>
<div class='zz'>BOX</div>

DEMO

Answer 4

К сожалению, это невозможно.Я предлагаю просто использовать div с фоновым изображением, которое вы создаете в Photoshop или аналогично.

Answer 5

Поздно на вечеринку, но, может быть, кто-то найдет это полезным! На самом деле вы можете сделать это с несколькими тенями на box-shadow:

box-shadow: inset 0px 33px 25px 0 #000, 
            inset 0 66px 15px 0px #ccc,
            inset 0 99px 5px 0px #fff;

пример кодекса: https://codepen.io/InFecT3D/pen/JQdmeL

Примечание: это может быть немного "хакерским" подходом, но в некоторых случаях это помогает.