轮廓(outline)
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。
轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。
简写格式:
outline: outline-color outline-style outline-width
CSS 轮廓图示:
CSS 轮廓(outline)的属性及取值与边框(border)类似。
CSS 轮廓属性及取值:
属性 | 说明 | 值 |
---|---|---|
outline | 在一个声明中设置所有的轮廓属性 | outline-color outline-style outline-width inherit |
outline-color | 设置轮廓的颜色 | color-name hex-number rgb-number invert inherit |
outline-style | 设置轮廓的样式 | none dotted dashed solid double groove ridge inset outset inherit |
outline-width | 设置轮廓的宽度 | thin medium thick length inherit |
轮廓(outline)与边框(border)的区别:
- border 可应用于几乎所有有形的 html 元素,而 outline 是针对链接、表单控件和 ImageMap 等元素设计。
- outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需 JavaScript 配合 CSS 来控制。
- outline 是不占空间的,不会像 border 那样影响元素的尺寸或者位置,既不会增加额外的 width 或者 height(这样不会导致浏览器渲染时出现 reflow 或是 repaint )。