css outline 属性 CSS outline 属性

css outline 属性

CSS outline 属性是一种用于指定元素轮廓的样式属性，它可以用来替代 border 属性，但是两者有很大的不同。

outline 属性可以让元素呈现出一个轮廓，但是不会影响布局，也不会占用页面上的空间。它可以用来替代 border 属性，因为它不会影响布局，而 border 会影响布局。

outline-style: solid;  
outline-color: #f00;   
outline-width: 2px;    

outline 属性有三个子属性： outline-style、outline-color、outline-width。 outline-style 用于指定轮廓的样式； outline-color 用于指定轮廓的颜色； outline-width 用于指定轮廓的宽度。

此外，还有一个 outline 属性叫 outline-offset ，用于控制元素的轮廓与其本身之间的间隙大小。例如：

 
outline-offset: 10px;    

CSS outline 属性还可以通过 shorthand 来声明所有子属性。例如：

 
outline: solid 2px #f00;    

CSS outline 和 border 非常相似，但是也存在很多重要区别。首先，border 是一种占位元素（block element) ，而 outline 是一种无占位元素(non block element) ；其次，border 是一种常用样式特效(visual effect) ；而 outline 是一种表明焦点(focus indicator) 的特效。因此在使用时要注意区分这两者之间的差别。

CSS outline 属性