如何修复边界半径与长方体阴影相结合的IE渲染？
如何修复边界半径与长方体阴影相结合的IE渲染？
提问于 2013-04-24 17:12:39
有谁知道如何在IE9和10中“修复”长方体阴影和边界半径的组合渲染？
在使用嵌入阴影时，这一点尤其明显。与webkit/gecko相比，IE中的阴影半径有很大的不同。
在此图像中，您可以看到问题所在。左边是一个带有框阴影的按钮，右边是一个没有框阴影的按钮。(不要介意不同的字体呈现)
下面是使用的代码：http://dabblet.com/gist/5450815
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-05-02 20:10:01
只有当嵌入阴影的扩散触发了比IE中的边界半径更大的“阴影半径”时，才会出现这个问题。在你的例子中，将边框半径设置为50px，它在IE和Chrome中看起来是一样的。
如果你需要一个更大的长方体阴影扩散，那么你可以使用边框代替，至少在你的例子中可以做到这一点。示例：http://dabblet.com/gist/5501799
你可能会看到的另一个问题是IE和Chrome渲染框阴影的模糊效果完全不同，但我假设你在示例中没有使用它。
Stack Overflow用户
发布于 2013-04-30 02:56:06
我尝试过的一个快速(半脏)解决方案是div中的div。如果这样做了，请让我知道。
HTML代码：
</head>
<body>
<div class="box"><div class="box-inside"></div></div>
</body>
</html>CSS代码：
.box {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #000;
width: 200px;
height: 100px;
background: #000;
}
.box-inside {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #fff;
width: 175px;
height: 75px;
position: relative;
top: 12%;
left: 6%;
background: #fff;
}我的jsfiddle
Stack Overflow用户
发布于 2013-05-03 04:46:11
试试这个，添加这个角色：
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16188024
复制相关文章
相似问题
腾讯云开发者
