Bootstrap里的圆角outline

Bootstrap里的圆角outline

• Bootstrap里的所有按钮都会有圆角outline的效果，像这样：

• 刚开始我以为是outline的效果，但是outline的圆角效果只有火狐浏览器支持，大多数浏览器都不支持，所以这里肯定不是outline

• Bootstrap的btn类里面有box-shadow这个属性，很显然就是使用这个属性实现的，如果不使用Bootstrap

<button class="menu-button">menu-buttonbutton>

.menu-button {
    box-sizing: content-box;
    padding: .375rem .75rem;
    border-radius: .25rem;
    border: none;
    background-color: #286dd6;
    color: #fff;
    font-size: 16px;
    outline: none;
    cursor: pointer;
}
.menu-button:focus {
    box-shadow: 0 0 0 5px #a1c8fb;;
}

• 可以实现相同的效果