Question

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

问题是，投影似乎是在周围元素。虽然我希望通过背景图像的透明部分看到阴影颜色，但我会看到背景颜色（see this 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/

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

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

http://jsfiddle.net/Etmty/

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

1 个答案: