我想利用我正在开发的一个网站的新
CSS3 Box-shadow功能.
问题是,如果内置img(边框在图像区域附近),Chrome 9.0.5和Opera 10不会正确渲染插入边框.
问题是,如果内置img(边框在图像区域附近),Chrome 9.0.5和Opera 10不会正确渲染插入边框.
我明白盒子阴影仍在工作中,但我希望浏览器完全支持或完全忽略它.
<!doctype html>
<html>
<head>
<style>
div {
border: 1px solid black;
width: 300px;
height: 200px;
overflow: hidden;
// CSS3 inset shade
-moz-Box-shadow: inset 0 0 20px red;
-webkit-Box-shadow: inset 0 0 20px red;
Box-shadow: inset 0 0 20px red;
}
</style>
</head>
<body>
<div>
<img src="http://www.google.com/images/logos/ps_logo2.png" width="364" height="126" alt="" />
</div>
</body>
</html>
有人知道一些解决方法来正确渲染红色阴影吗？
谢谢！
编辑：我很高兴的答案,但只是想添加一个实时链接,以帮助其他人在那里. Here it is
解决方法
盒子阴影恰好高于使用插图时堆叠顺序的背景.因此,您在div内部的任何图像都将覆盖阴影.
In terms of stacking contexts and the
painting order,the outer shadows of
an element are drawn immediately below
the background of that element,and
the inner shadows of an element are
drawn immediately above the background
of that element (below the borders and
border image,if any).
换句话说,Chrome和Opera正在做正确的操作(FTR,FF 3.6.13与Opera相同).
如果您希望影子与图像重叠,您可以根据需要选择不同的选项：
>将图像设置为div的background属性.>绝对将图像放在一个div上,使其大小相同,并将阴影放在那里(不是真的推荐,因为它是曲折的,并添加了非语义标记).>确保图像的背景是透明的(这将允许阴影显示,但非透明像素仍然会覆盖阴影).>考虑使用边框图像和渐变. (这一个也有点复杂,但把渐变放在边框本身,你可以使用RGBA淡入透明.)
