背景:我在写鼠标悬停样式
.topbox .menuBox > ul > li:hover { border-bottom: 4px solid #3C7CFC; font-weight: 600; color: #3C7CFC; }
这样写的话出来的效果是:
我想要的是,鼠标悬停,生成一个内边框,应该在上边,我就查了一下border这个属性,他是有两个值,是可以设置边框是向内还是向外的
- 如果要设置为内边框使用:
box-sizing: border-box;
- 如果要设置为内边框使用:
box-sizing: content-box;
我添加完css样式,效果就正常了:
再添加一个圆角就可以了:border-radius: 2px;