css框阴影+透明背景图像=直观细分

Question

• 我有一个按钮图像我用作某些链接的背景图像.
• 背景图像具有圆角.
• 我想使用css投影而不是将阴影放在图像中

问题是,投影似乎是在元素周围绘制的.虽然我希望通过背景图像的透明部分看到阴影颜色,但我会看到背景颜色(请参阅此jsfiddle).

我的实际目标有点复杂,但如果我能满足前三个要点那么我就可以完成这项任务.具体来说,我想要做的是使用两个嵌套元素与按钮图像的右侧和左侧部分(圆角)的背景图像,以便我可以使用相同的CSS在任何长度的文本周围包裹"按钮".由于背景在css'滑动门'样式中重叠,因此png alpha阴影显示图像重叠的2x暗部分.Soo ..我以为我会使用css阴影,但正如你在jsFiddle中看到的那样,也存在问题.

有任何想法吗？

Answer 1

框阴影不透过透明背景显示.一个更简单的测试用例是:

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: transparent;
  box-shadow: 0 0 10px #000;
}?

预期的输出是一个很好的模糊黑色方块对吗？嗯......不,这是一个带有阴影的白色方块.http://jsfiddle.net/UjhrW/

要实现您想要做的事情,您需要为阴影部分单独标记,用白色填充,然后设置阴影的溢出,使其看起来像一个模糊的方形......

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #000;
  box-shadow: 0 0 10px 6px #000;
}?

http://jsfiddle.net/Etmty/