outline只画一边？

[lostvita]

outline，直译有「轮廓」的意思，css中用于描绘元素的轮廓，一般的用法是：

outline: width style color;

与border用法相似，但有两点不同：

• outline不能针对部分边框进行设置；
• outline不属于盒子模型的部分，它不影响自身或邻近元素的位置；

outline我们一般用在鼠标的hover样式上：

div:hover{
    outline: 1px solid #32a1ce;
}

如上处理，元素的四个边框都会生效，但很多时候，我们可能只需要一条底边框，outline不支持单边框的设置，那如何实现呢？

还是借助border：

div:hover{
    border-bottom: 1px solid #32a1ce;
    margin-bottom: -1px;
}

如此可以实现单边的outline效果，不影响任何元素的位置。

是否还有别的方式呢？