为什么IE将不透明度应用于边界样式:虚线？
为什么IE将不透明度应用于边界样式:虚线？
提问于 2014-12-01 15:13:58
标题说明了一切，我刚刚发现IE (9-11)会自动将大约50%的不透明度应用于任何元素与border-style: dotted的边界。
最奇怪的是，它只发生在dotted上，特别是solid和dashed。
您可以自己测试：http://jsfiddle.net/ptv74f4q/1/
有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-01 15:33:36
这似乎是由于IE反别名的虚线边界.如果使border-width大于1px (例如5px)，边框将再次显示为白色。
解决这一问题的一种方法是将一些伪元素与顶部相同的虚线边框叠加起来，以抵消不透明度：
div {
width: 200px;
height: 200px;
background: #000;
}
span {
transform: rotate(0deg);
display: inline-block;
width: 180px;
height: 85px;
line-height: 85px;
text-align: center;
margin: 8px 8px 0 8px;
border: #fff 1px solid;
color: #fff;
position: relative;
}
span.dotted {
border-style: dotted;
}
span.dotted::before, span.dotted::after {
border: #fff 1px dotted;
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
}<div>
<span>I'm with normal border</span>
<span class="dotted">I'm with dotted border</span>
</div>
JS Fiddle: http://jsfiddle.net/oyrbLyjc/1/
替代方法
或者，您可以尝试使用border-image。有一些在线工具(例如generator)可以帮助您使用此方法生成类似的边框。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27231400
复制相关文章
相似问题
腾讯云开发者
