CSS outline实现意想不到的效果

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

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

• outline-width
• outline-style
• outline-color
• outline-offset

DEMO

那让我们来试一试：

和border的区别

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

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

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

得出结论：

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

2. 轮廓线位于边框的外围。从效果可以看到，轮廓线位于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情况下）期待相遇。