css box阴影+透明背景图片=直观的细分

我有一个按钮图像我用作一些链接的背景图片。
背景图像有圆角。
我想使用一个CSS阴影，而不是把阴影图像

的问题是在，在阴影似乎可以得出周围的元素。尽管我期望通过背景图像的透明部分看到阴影颜色，但我却看到了背景色（see this jsfiddle）。css box阴影+透明背景图片=直观的细分

我的实际目标是稍微复杂一些，但如果我能够满足我的前三个要点，那么我可以完成这项任务。具体来说，我想要做的是使用两个嵌套元素与右侧和左侧按钮图像部分（圆角）的背景图像，以便我可以使用相同的css在任意长度的文本周围包围“按钮”。由于背景在css'推拉门'风格中重叠，所以png alpha阴影显示图像重叠处的2倍黑暗部分。 Soo ..我想我会用一个css的影子，但正如你在jsFiddle中看到的那样，这也有问题。

任何想法？

来源

2012-03-05 doub1ejack

通过透明背景不显示框阴影。一个更简单的测试情况是：

.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/

来源

2012-03-05 20:24:26 Duopixel

好的，这产生了一个很好的阴影的印象。你是否建议我通过.box div定位背景图片？似乎它应该工作.. – doub1ejack 2012-03-05 21:39:35

其实，这是相当不错的：http://jsfiddle.net/doub1ejack/AAAMH/。我已经解决了这个问题，非常小心地将我的div大小设置为与背景图像相同的大小和形状，但感觉有点脆弱。我更喜欢这个，谢谢。 – doub1ejack 2012-03-05 21:50:50

为什么你需要一个单独的div？只需将阴影添加到包含div。 - http://jsfiddle.net/NotInUse/AAAMH/2/，除非我错过了一些东西，你得到的代码比需要的多。 – Scott 2012-03-06 00:56:10

css box阴影+透明背景图片=直观的细分

回答

相关问题