css盒子阴影+透明背景图片=直观分解

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

问题是，阴影似乎是绘制的around元素。虽然我有点希望通过背景图像的透明部分看到投影颜色，但我看到的是背景颜色（看到这个jsfiddle http://jsfiddle.net/doub1ejack/cXKTx/).

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

有任何想法吗？

盒子阴影不会通过透明背景显示。一个更简单的测试用例是：

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

预期的输出将是一个漂亮的模糊黑色方块，对吧？嗯...不，它是一个带有阴影的白色方块。http://jsfiddle.net/UjhrW/ 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/ http://jsfiddle.net/Etmty/

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

<div class="box"></div>