CSS CSS3 Box-Shadow 线性渐变？

CSS3 Box-Shadow Linear Gradient?

提问by Oliver Spryn

Is there a way in CSS3 to create a cross-browser (i.e.: Mozilla, Webkit, and Opera) inset box shadow that will transition from black on top to white on the bottom? The closest way that I have found to do this only allows the outside of the shadow to be one color, then transition to another color on the inside, on this page: http://www.css3.info/preview/box-shadow/

CSS3 中是否有一种方法可以创建一个跨浏览器（即：Mozilla、Webkit 和 Opera）插入框阴影，该阴影将从顶部的黑色过渡到底部的白色？我发现的最接近的方法只允许阴影的外部是一种颜色，然后在内部过渡到另一种颜色，在此页面上：http: //www.css3.info/preview/box-shadow /

采纳答案by Hymantheripper

Unfortunately, this is not possible. I suggest just using a div with a background-image that you create on Photoshop or likewise.

不幸的是，这是不可能的。我建议只使用带有背景图像的 div，该背景图像是在 Photoshop 上创建的或类似的。

回答by redbmk

Take a look at this video by Lea Verou. The section I linked to talks about something very similar, where you use background-image gradients to make something like a box-shadow. If I can figure out a good working example I'll post an answer, but this should give you a good place to start. You can also do some really cool stuff, like a box shadow curlwith the :afterpseudo-class to make a shadow appear.

看看Lea Verou 的这个视频。我链接到的部分讨论了非常相似的内容，您可以使用背景图像渐变来制作类似框阴影的东西。如果我能找出一个很好的工作示例，我会发布一个答案，但这应该给你一个很好的起点。您还可以做一些非常酷的事情，例如使用伪类进行框阴影卷曲以:after显示阴影。

Here are a few simple examples at the top and bottom of a box, and underlining some text. You'll have to play around with it (a lot, probably) to get it to look how you want, but css has some really awesome features (and there will be more and more).

下面是一些位于框顶部和底部的简单示例，并在一些文本下划线。你将不得不玩弄它（很多，可能）才能让它看起来像你想要的那样，但是 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: '
<div class="container">
  <div class="underline">Hello, world!</div>
</div>
a0';
    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%;
}

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

回答by Niv'O

Late to the party, but maybe someone will find it useful! You can actually do it with multiple shadows on the box-shadow:

聚会迟到了，但也许有人会发现它很有用！您实际上可以在 box-shadow 上使用多个阴影来做到这一点：

  .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;
      }
    }
  }

codepen example : https://codepen.io/InFecT3D/pen/JQdmeL

代码笔示例：https://codepen.io/InFecT3D/pen/JQdmeL

Side note: it might be a little "hacky" approach, but in some cases it helps.

旁注：这可能有点“hacky”方法，但在某些情况下它会有所帮助。

回答by ink

Try using a :before element to set a 'shadow' up.

尝试使用 :before 元素来设置“阴影”。

.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;
}

This above code is an example on how to set up such an hover effect.

上面的代码是关于如何设置这种悬停效果的示例。

回答by Ignacio Ramos

Two divs are necessary:

需要两个div：

1: with the linear gradient + blur:

1：用线性渐变+模糊：

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

2: over the other, the content.

2：过其他，内容。

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

Then:

然后：

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

DEMO

演示

回答by Alex Yursha

If the intention is to create a semi-transparent overlay over a background image, then it can be achieved with the following style rule without box-shadow.

如果打算在背景图像上创建半透明叠加层，则可以使用以下样式规则来实现，而无需box-shadow.

##代码##

See background-imageon MDN.

请参阅background-imageMDN。