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版权协议,转载请附上原文出处链接和本声明。