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情况下)期待相遇。

麻凯倩

微信:makaiqian