button 黑边问题

黑边问题
黑边问题如上图,
active状态下才有,很难看。查看源码发现设置了
outline和box-shadow 阴影。

box-shadow
去掉即可:
.btn:active,
.btn.active,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: 0;
    box-shadow:none;
}
知识点:彻底弄懂 outline border box-shadow

outline border box-shadow三者的关系

outline 1px

outline: 1px   outline-offset: 12px

outline 5px outline-offset: 12px

outline: 13px  box-shadow: 0 0 55px 10px red

outline: 13px  outline-offset: 12px  box-shadow: 0 0 55px 10px red
由于outline-offset 属性的存在,outline和border,outline和 box-shadow均有可能重叠。

发表评论 (审核通过后显示评论):