CSS 是否可以将阴影设为渐变？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12118536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
is it possible to have a drop shadow be a gradient?
提问by Matthew
I'm trying to figure out if this is possible with css. I want a square that has a drop shadow. At the bottom of the square, the drop shadow is completely visible. At the top of the square, no drop shadow should be apparent. This would be a gradient so being in between the top and bottom, the drop shadow would be half visible.
我想弄清楚这是否可以用 css 实现。我想要一个有阴影的正方形。在方块的底部，阴影完全可见。在正方形的顶部，不应有明显的阴影。这将是一个渐变，因此在顶部和底部之间，阴影将是半可见的。
Any ideas on how to achieve this?
关于如何实现这一目标的任何想法？
回答by Ana
It is possible to emulatethat using a gradient on an absolutely positioned pseudo-element, with a z-indexsuch that it appears underneath its parent element.
可以模拟在绝对定位的伪元素上使用渐变z-index，使其出现在其父元素下方。
HTML:
HTML：
<div class='e'></div>
CSS:
CSS：
.e {
position: relative;
width: 10em;
height: 10em;
margin: 1em;
background: lemonchiffon;
}
.e:before {
position: absolute;
z-index: -1;
top: 10%; left: 10%;
width: 100%;
height: 100%;
background: linear-gradient(transparent, navy);
content: '';
}
If you want the shadow to have a faded edge, then you'll have to give the pseudo-element an inset shadow (same colour as the background of .e's parent).
如果您希望阴影具有褪色边缘，那么您必须为伪元素提供一个插入阴影（与.e的父元素的背景颜色相同）。
box-shadow: inset 0 0 .5em .5em white;
Note that this won't work in IE9 and older. You can use filtergradients for those, but not on pseudo-elements, so what you would have to do in this case would be to add a child to the element (just for IE) and style it just like you style the pseudo-element.
请注意，这在 IE9 及更早版本中不起作用。您可以filter为这些使用渐变，但不能在伪元素上使用，因此在这种情况下您必须做的是将子元素添加到元素（仅适用于 IE）并设置样式，就像您设置伪元素的样式一样。
EDIT: If you want this to work over an image, gradient background, then I'm afraid it's a bit trickier and it cannot be done using just CSS in IE9 and older. However, in the current versions of the other browsers, this can be achieved using a linear gradient and three radial gradients.
编辑：如果您希望它在图像、渐变背景上工作，那么恐怕这有点棘手，并且无法在 IE9 及更早版本中仅使用 CSS 来完成。但是，在其他浏览器的当前版本中，这可以使用线性渐变和三个径向渐变来实现。
Relevant CSS:
相关CSS：
.e {
width: 25em; /* give it whatever width and height you like */
height: 25em;
/* make padding on right and bottom larger by adding the amount taken by
* the "shadow"
*/
padding: 5% 10% 10% 5%;
box-sizing: border-box;
/* change navy to red in each of these at one time to see what each
* gradient covers
*/
background:radial-gradient(at top right, navy, transparent 70.71%) 0 100%,
radial-gradient(at top left, navy, transparent 70.71%) 100% 100%,
radial-gradient(at bottom left, navy, transparent 70.71%) 100% 0,
linear-gradient(navy, transparent) 50% 100%;
background-repeat: no-repeat;
background-size: 95% 95%, 5%, 5%, 5% 95%, 90% 5%;
}
回答by Roi
I just had to mock this up for one of my dev's... Maybe useful to someone:
我只需要为我的一个开发人员模拟这个......也许对某人有用：
Code Pen
http://codepen.io/anon/pen/aOpOMV
代码笔
http://codepen.io/anon/pen/aOpOMV
HTML
HTML
<div class="element">
<div class="inner">
lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah
</div>
</div>
CSS
CSS
.element {
width:500px; min-height:500px; box-shadow:0 0 8px 0 rgba(0,0,0,.4); margin:0 auto; position:relative;
}
.element:before {
position:absolute; bottom:0; width:100%; height:80%; content:''; background: linear-gradient(transparent 0%,#fff 100%);transform:scale(1.2);
}
.inner {
position:relative; z-index:2; padding:20px;
}
NOTE:width / height aren't needed.. just there for mocking
注意：不需要宽度/高度..只是为了嘲笑
回答by Dai
CSS3's box-shadowproperty only accepts a <color>value and nothing more complicated like an image or CSS gradient, but I can think of a few ways to hack it.
CSS3 的box-shadow属性只接受一个<color>值，没有比图像或 CSS 渐变更复杂的东西，但我可以想到一些方法来破解它。
The first is to have a parent element with a gradient background and then an inner shadow applied (where the inner shadow is the same color as the page background, assuming you're okay with a solid color). You then put your actual box inside this.
第一个是让父元素具有渐变背景，然后应用内阴影（假设您可以使用纯色，内阴影与页面背景颜色相同）。然后你把你的实际盒子放在里面。
The alternative is using CSS3 image-borders (using stretchinstead of tiling). You can generalise a drop-shadow as a specific case of CSS image borders, so just create your own gradient image in Photoshop and make that the border.
另一种方法是使用 CSS3 图像边框（使用stretch而不是平铺）。您可以将阴影概括为 CSS 图像边框的一种特殊情况，因此只需在 Photoshop 中创建您自己的渐变图像并将其作为边框即可。
Finally, the only other option is CSS2-style of wrapper elements and predefined images. I'd argue this isn't necessary anymore as no-one cares about IE6 and 7 now.
最后，唯一的其他选择是 CSS2 样式的包装元素和预定义图像。我认为这不再是必要的，因为现在没有人关心 IE6 和 7。
回答by mxdubois
If I understand you correctly, you want something like this:
如果我理解正确的话，你想要这样的东西：
box-shadow: black 0 -60px 50px -50px inset
box-shadow: black 0 -60px 50px -50px inset
The final value (-50px) clips the shadow back 50px on all sides. Then the second value (-60px) cancels that out in the vertical direction, along the bottom, and adds 10px to the bottom shadow. The third value is the spread, which is how I decided how much to clip the shadow in the fourth value.
最终值 (-50px) 在所有边上将阴影向后剪裁 50px。然后第二个值 (-60px) 在垂直方向沿底部抵消它，并将 10px 添加到底部阴影。第三个值是传播，这就是我决定在第四个值中剪裁多少阴影的方式。
But you'll have difficulty using box shadow to do this. You definitely can't cover half the box unless you know the element's height. It's better to just use a background-image property with a CSS3 gradient. Check out this link for details: http://www.impressivewebs.com/css3-linear-gradient-syntax/
但是你会很难使用框阴影来做到这一点。除非您知道元素的高度，否则您绝对不能覆盖一半的盒子。最好只使用带有 CSS3 渐变的 background-image 属性。查看此链接了解详情：http: //www.impressivewebs.com/css3-linear-gradient-syntax/
EditOH I think understand what you mean. You actually want a drop shadow, not an inset shadow, but you want it to appear like a gradient. David's answer is more applicable. I can't add comments, but you could use a :before and/or :after pseudo element for his first option.
编辑哦，我想明白你的意思。您实际上想要一个投影，而不是一个插入阴影，但您希望它看起来像一个渐变。大卫的回答更适用。我无法添加评论，但您可以使用 :before 和/或 :after 伪元素作为他的第一个选项。
