Open lostvita opened 3 years ago
outline,直译有「轮廓」的意思,css中用于描绘元素的轮廓,一般的用法是:
outline: width style color;
与border用法相似,但有两点不同:
outline我们一般用在鼠标的hover样式上:
div:hover{ outline: 1px solid #32a1ce; }
如上处理,元素的四个边框都会生效,但很多时候,我们可能只需要一条底边框,outline不支持单边框的设置,那如何实现呢?
还是借助border:
div:hover{ border-bottom: 1px solid #32a1ce; margin-bottom: -1px; }
如此可以实现单边的outline效果,不影响任何元素的位置。
是否还有别的方式呢?
outline,直译有「轮廓」的意思,css中用于描绘元素的轮廓,一般的用法是:
与border用法相似,但有两点不同:
outline我们一般用在鼠标的hover样式上:
如上处理,元素的四个边框都会生效,但很多时候,我们可能只需要一条底边框,outline不支持单边框的设置,那如何实现呢?
还是借助border:
如此可以实现单边的outline效果,不影响任何元素的位置。
是否还有别的方式呢?