CSS3 Box-Shadow Linear Gradient?

Ответ 1

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

Ответ 2

Посмотрите это видео Lea Verou. Раздел, который я связал с разговорами о чем-то очень похожим, где вы используете градиенты фонового изображения, чтобы сделать что-то вроде тени-коробки. Если я смогу найти хороший рабочий пример, я отправлю ответ, но это должно дать вам хорошее место для начала. Вы также можете сделать некоторые действительно классные вещи, например, скруглить тень окна с псевдо-классом :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>

Ответ 3

Попробуйте использовать элемент: 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;
      }
    }
  }

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

Ответ 4

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

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

пример codepen: https://codepen.io/InFecT3D/pen/JQdmeL

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

Ответ 5

Необходимо два div:

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

Ответ 6

Если целью является создание полупрозрачного наложения поверх фонового изображения, то это может быть достигнуто с помощью следующего правила стиля без box-shadow.

background-image: linear-gradient(rgba(0, 0, 0, 0.5),
                                  rgba(255, 255, 255, 0.5)),
                  url("background.png");

Смотрите background-image в MDN.