css box shadow + 透明背景图片 = 直观细分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9569984/
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
css box shadow + transparent background images = intuitive breakdown
提问by doub1eHyman
- I have a button image I'm using as a background image for some links.
- The background image has rounded corners.
- I want to use a css drop shadow instead of putting the drop shadow in the image
- 我有一个按钮图像，用作某些链接的背景图像。
- 背景图像有圆角。
- 我想使用 css 投影而不是将投影放在图像中
The problem is, the drop shadow appears to be drawn aroundthe element. Although I kind of expected to see the drop shadow color through the transparent parts of the background image, I'm seeing the background color instead (see this jsfiddle).
问题是，阴影似乎是围绕元素绘制的。虽然我有点希望通过背景图像的透明部分看到阴影颜色，但我看到的是背景颜色（参见这个 jsfiddle）。
My actual goal is a little more complex, but if I can satify my first three bullet points then I can nail this task. Specifically, what I want to do is use two nested elements with background images of the right and left parts of a button image (rounded corners) so that I can use the same css to wrap a 'button' around text of any length. Since the backgrounds overlap in a css 'sliding doors' style, a png alpha drop shadow shows a 2x dark section where the images overlap. Soo.. I thought I'd use a css shadow, but as you can see in the jsFiddle, there are problems with that too.
我的实际目标有点复杂，但如果我能满足前三个要点，那么我就可以完成这项任务。具体来说，我想要做的是使用两个嵌套元素以及按钮图像（圆角）左右部分的背景图像，以便我可以使用相同的 css 将“按钮”包裹在任何长度的文本周围。由于背景以 css 的“滑动门”样式重叠，因此 png alpha 投影显示图像重叠的 2x 暗部分。Soo .. 我以为我会使用 css 阴影，但是正如您在 jsFiddle 中看到的那样，这也存在问题。
Any ideas?
有任何想法吗？
采纳答案by methodofaction
Box-shadows don't show through transparent backgrounds. A more simple test case would be:
框阴影不会通过透明背景显示。一个更简单的测试用例是：
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: transparent;
box-shadow: 0 0 10px #000;
}?
The output expected would be a nice blurred black square right? Well... no, it's a white square with a dropshadow. http://jsfiddle.net/UjhrW/
预期的输出将是一个很好的模糊黑色方块，对吗？嗯...不，它是一个带有阴影的白色方块。http://jsfiddle.net/UjhrW/
To achieve what you want to do you will need separate markup for the dropshadow, fill it with white, and then set the spill of the shadow so it looks like a blurry square...
为了实现您想要做的事情，您需要为阴影单独标记，用白色填充，然后设置阴影的溢出，使其看起来像一个模糊的方块......
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}?
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}<div class="box"></div>