Question

标题说明了一切，我刚刚发现IE（9 - 11）会自动将约50％的不透明度应用于任何元素与border-style: dotted的边界。

最奇怪的是，它只发生在dotted上，solid和dashed都很好。

您可以自行测试：http://jsfiddle.net/ptv74f4q/1/

有什么想法吗？

Answer 1

这似乎是由于IE消除了虚线边框的锯齿现象。如果您将border-width大于1px（例如5px），则边框将再次显示为白色。

解决这个问题的一种方法是在顶部覆盖一些带有相同虚线边框的伪元素，以抵消不透明度：

＆＃13;

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%;
}

＆＃13;

<div>
    <span>I'm with normal border</span>
    <span class="dotted">I'm with dotted border</span>
</div>

＆＃13;

JS小提琴： http://jsfiddle.net/oyrbLyjc/1/

替代方法

或者您可以尝试使用border-image。有一些在线工具（例如https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator）可以帮助您使用此方法生成类似的边框。

为什么IE将不透明度应用于border-style：dotted？

1 个答案: