📌  相关文章
📜  HTML | DOM 样式 outlineColor 属性(1)

📅  最后修改于: 2023-12-03 15:15:36.736000             🧑  作者: Mango

HTML | DOM 样式 outlineColor 属性

介绍

HTML | DOM 样式 outlineColor 属性用于设置元素的外边框的颜色。元素的外边框不占用布局空间，而是在元素周围绘制一个指定颜色和宽度的矩形框，用于强调元素的位置。

语法

outlineColor 属性可在 CSS 中使用，也可以作为 HTML DOM 中的属性来设置。

在 CSS 中：

selector {
  outline-color: color|invert|initial|inherit;
}

在 HTML DOM 中：

object.style.outlineColor = "color|invert|initial|inherit";
属性值
  • color：指定一个颜色值，例如"red"、"#ff0000"。默认为默认文本颜色。
  • invert：将边框的颜色设为其背景的反色，即取反色。实际应用较少。
  • initial：将边框颜色设为默认值。默认值为当前文本颜色。
  • inherit：从父元素继承 border-color 属性的值。
示例
<!DOCTYPE html>
<html>
  <head>
    <style>
      /* CSS中设置outline-color属性 */
      h1 {
        outline-style: solid;
        outline-color: #ff0000;
        outline-width: 10px;
      }
    </style>
  </head>
  <body>
    <!-- HTML中设置style属性 -->
    <h1 style="outline-color: blue;">标题1</h1>
  </body>
</html>
注意事项
  • outline-color属性仅当 outline-style 属性的值不为 "none" 时才有效。
  • IE8 及更早的版本不支持 "outline-color" 属性。要为不支持它的浏览器设置颜色，需要使用 "border-color" 属性代替 "outline-color" 属性。
  • 当使用该属性时，请同时在 CSS 中为元素指定 outline-style 和 outline-width 属性，否则设置 outline-color 不会产生任何效果。
浏览器兼容性

| Chrome | IE | Edge | Firefox | Safari | Opera | | -- | -- | -- | -- | -- | -- | | 1.0 | 8.0 | 12.0 | 1.0 | 1.0 | 7.0 |

以上浏览器支持 outline-color 属性。

参考链接