实现java的outline功能_CSS outline实现意想不到的效果

今天在微博看见@zhangxinxu召集各种实现了十字功能的方法。@大地Dudy和@灵感_idea都想到了用outline-offset这个方法，大开眼界。我就开始关注起了这个css属性。

这个属性其实很简单，就4种类型：

outline-width

outline-style

outline-color

outline-offset

DEMO

那让我们来试一试：

和border的区别

那不是和border很像吗？它们又有什么区别呢？

答：outline是位于边框外围的轮廓线，不会占据空间。

那我们让outline和border一起出现试试：

得出结论：

红色的轮廓线果然不会占据空间。这里，我特别把body的margin和padding都设置为0，为了效果更加明显。

轮廓线位于边框的外围。从效果可以看到，轮廓线位于border的外围。

好玩的地方呢？

之前，并没有看出什么有趣的地方，那是因为outline-offset还没有出场。

比如：

那～兼容性怎么样！？

之前都没有怎么遇见过，难道是因为兼容性特别不好？事实上，果然在兼容性上有问题：

所有的IE都不兼容。我亲自试了下，ie11下也会有问题。那只能默默忽略ie～很多时候，我们都因为兼容性而受到束缚。

属性可用的值速查

outline-width

thin medium thick px ex em

outline-style

outline-style: auto

outline-style: none

outline-style: dotted

outline-style: dashed

outline-style: solid

outline-style: double

outline-style: groove

outline-style: ridge

outline-style: inset

outline-style: outset

outline-style: inherit

outline-color

outline-color: invert outline-color: red

outline-color: inherit

outline-offset

px em inherit

那...以后的一些样式，我们是不是可以尝试用outline来实现呢？(不考虑IE情况下)期待相遇。