区别
1. border 占用空间,outline 不占用空间,不会影响元素的尺寸和位置。
2. border 可应用于几乎所有有形的 html 元素,而 outline 是针对链接、表单控件和 ImageMap 等元素设计。从而另一个区别也可以推理出,那就是: outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需 JavaScript 配合 CSS 来控制。
outline 的作用
1. 利用这些特性,我们常用 outline 来设置悬停的动态效果。之前一直困扰我的问题:hover 加边框会导致元素定位和大小的改变,同时也会影响其他元素位置的改变。
2. 解决 hover 加边框会导致元素定位和大小的改变的问题,的另一只解决思路,用怪异盒模型,给元素加上 box-sizing: border-box; 属性。
学习 outline
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
注释:轮廓线不会占据空间,也不一定是矩形。
可以按顺序设置如下属性:
- outline-color
- outline-style
- outline-width
连写 和 border 一样:outline: 1px solid #000;
其它可能用到的值:
inherit 规定应该从父元素继承 outline 属性的设置。
none 规定元素不设置 outline 属性
相关属性
语法:
outline-offset: length / inherit;
例子:
outline-offset: -10px; 向内推10px