标签归档:outline

Firefox Box-shadow & Outline bug

Firefox同时使用outline和boxshadow时会出现outline被shadow撑开的bug,Chrome、Opera不存在此问题。

如以下代码:

<style type="text/css">
    #ffbug{
        margin:30px auto;
        width:200px;
        height:200px;
        border:2px solid blue;
        outline:5px dotted green;
        box-shadow: 0 0 10px red;
        -moz-box-shadow: 0 0 10px red;
        -webkit-box-shadow: 0 0 10px red;           
    }
</style>
<div id="ffbug">
    蓝色为border<br />
    绿色为outline<br />
    红色为box-shadow<br /><br />
    Firefox会将box-shadow的宽度计算进width中,从而导致border变化,于是outline偏移。
</div>

继续阅读