HTML

Question

我可能需要你的帮助。我试着用一张图片作为 div 的背景，并用 box-shadow 遮盖边框。问题是它在 Firefox 和 Internet Explorer 的边框处仍然显示为背景图像的一个像素，只是 Google Chrome 按预期显示它。

这里是 link 实际页面：the page where the error occurs。我希望有人可以帮助我。

顺便说一句。我试图为第二个（野蛮人）使用未缩放的图像，但没有任何区别：/

感谢您的任何建议，费雷尔

Answer 1

你能不能这样试试。当您使用 box-shadow 时，您应该添加 -webkit- 和 -moz- 前缀以及框阴影属性

例如。

-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

Answer 2

避免此问题的一种方法是通过其他方法对图形进行垂直居中，而不使用变换。一种流行的方法（在基于转换的解决方案可行之前）是利用 display:table 和 display:table-cell 样式。

将此方法应用于您的 CSS，并进行调整以修复它导致的任何视觉不一致，您将对以下声明块进行修改：

/* ./resurces/css/positioning.css */
#graph_wrapper{
    width: 100%;
    height: 100%;
    text-align: center;
    /*display: block;*/
    display: table;
    position:absolute;
}
#graph_wrapper_inner{
    /*height: 550px;*/
    /*min-width: 900px;*/
    display: table-cell;
    vertical-align:middle;
    /*position:absolute;*/
    /*padding: 20px;*/
}
#graph{
    display:inline-block;
    padding: 20px;
    height: 550px;
    min-width: 900px;
    position: relative; 
}
#graph,#graph_wrapper_inner{
    /*top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);*/
}
.YPositioner{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#header,#left,#right,#bottom,#graph{
    background-color: #202020;
    color: #36B1EC;
    border: 3px solid #035881;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;      
}

/* ./resurces/css/diagram.css */
#graph_wrapper_inner{
    /*background-color: rgba(32,32,32,0.95);*/
}

这里有一个 JSfiddle 来演示修复。为了将来参考，创建一个更轻量级的问题演示将使人们更容易使用您的代码，并且可能会得到更有用的回复。希望这可以帮助！如果您有任何问题，请告诉我。

HTML - 图片框阴影不覆盖图片边框

HTML - Image box-shadow does not cover image border

css

background-image

box-shadow