Bootstrap里的圆角outline

Bootstrap里的圆角outline

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

在这里插入图片描述

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

在这里插入图片描述

  • Bootstrap的btn类里面有box-shadow这个属性,很显然就是使用这个属性实现的,如果不使用Bootstrap
<button class="menu-button">menu-button</button>
.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;;
}
  • 可以实现相同的效果

在这里插入图片描述


版权声明:本文为qq_41672008原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。