Question

我的SVG包含一个元素。此元素具有插入框阴影。不幸的是，当元素靠近有填充的边时，它们实际上被绘制在框阴影之上而不是在它之下。我怎样才能解决这个问题？

HTML：

<div id="holder"></div>

CSS：

#holder {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6) inset;
    margin: 10px;
    width: 200px;
    height: 200px;
}

使用Javascript：

window.onload = function() {
    var r = Raphael("holder", 200, 200);

    var rect = r.rect(140, 140, 150, 150);  
    rect.attr({fill:"#fff"});    
};

Answer 1

如果没有SVG，你会有一个图像，你会遇到同样的问题。幸运的是，图像的解决方法是众所周知的：在覆盖div的伪元素上应用框阴影，例如：

#holder {
    margin: 10px;
    width: 200px;
    height: 200px;
    position: relative;
}

#holder:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.6) inset;
}

http://jsfiddle.net/VxxwJ/

Answer 2

如何在阴影中创建另一个div？喜欢

<div id="holder"><div id="inner"></div></div>

#holder {
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.6) inset;
    margin: 10px;
    width: 200px;
    height: 200px;
}

#inner {
    position:relative;
    top:10px;
    left:10px;
    width: 180px;
    height: 180px;
}

window.onload = function() {
    var r = Raphael("inner");
    var rect = r.rect(140, 140, 70, 70).attr({fill:"#fce"});    
};

结果看起来像this。

带有填充属性的SVG rect显示在上面，包含元素插入框阴影

2 个答案: