CSS outline-offset 属性

CSS outline-offset 属性用于设置 outline 与一个元素边缘或边框之间的间隙。

outline 是元素的轮廓,悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说,它们之间的颜色会继承父元素的背景色。


实例

规定边框边缘之外 15 像素处的轮廓:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. margin:20px;
  8. width:150px;
  9. padding:10px;
  10. height:70px;
  11. border:2px solid black;
  12. outline:2px solid red;
  13. outline-offset:15px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <p><b>注释:</b>Internet Explorer 和 Opera 不支持 support outline-offset 属性。</p>
  19. <div>这个 div 在边框边缘之外 15 像素处有一个轮廓。</div>
  20. </body>
  21. </html>

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
outline-offset4.015.03.53.110.5

定义和用法

outline-offset 属性对轮廓进行偏移,并在边框边缘进行绘制。

轮廓在两方面与边框不同:

  • 轮廓不占用空间
  • 轮廓可能是非矩形
默认值:0
继承性:no
版本:CSS3
JavaScript 语法:object.style.outlineOffset="15px"

语法

  1. outline-offset: length|inherit;
描述
length轮廓与边框边缘的距离。
inherit规定应从父元素继承 outline-offset 属性的值。

分类导航