利用CSS3实现圆角的outline效果的教程

利用CSS3实现圆角的outline效果的教程

一、首先，outline是个很牛的东西

3. 不占领空间

默认的盒模型下，假设元素100*100像素，我们给元素设置border:10px solid，则实际该元素占领的尺寸起码就是120*120像素，1. border近亲

元素的偏移、布局啊什么的，就需要多多思考。但是，outline不一outline和border是近亲，为什么这么讲呢？首先，都是给元素外面样，你哪怕outline:100px solid，元素占领的尺寸还是100*100像套框框的；第二，支持的属性值几乎都是一样的，例如，outline-style素。这种行为表现，与transform以及box-shadow等CSS3属性很类和border-style值dotted, dashed, solid, ...之类的，一些语法也似，虽然形状丰满了，但是，占领的真切空间没有影响。于是，我们几乎一样。假如这都不算近亲，你让肯定定位和浮动何言以对。

在实现一些交互效果的时候，例如hover变幻，我们就可以专注于效

果本身，而不用被布局所左右，是很棒的体验。

2. IE8+支持

outline严格来讲属于CSS3属性，但是IE8+扫瞄器就支持了。外挂一4. 直角！圆角？

句，IE9+扫瞄器的outline还支持invert，特地针对outline-color. 所正巧承上启下一下。

以，假如你的项目不用管IE6/IE7扫瞄器，可以把outline挂在心中，二、outline的直角与圆角

有时候说不定会帮忙。

第 1 页 共 6 页