CSS 轮廓颜色

outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置颜色：

• name - 指定颜色名，比如 "red"

• HEX - 指定十六进制值，比如 "#ff0000"

• RGB - 指定 RGB 值，比如 "rgb(255,0,0)"

• HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"

• invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

下例展示了一些不同颜色的不同轮廓样式。请注意，这些元素在轮廓内还有黑色细边框：

红色的实线轮廓。

蓝色的点状轮廓。

灰色的凸边轮廓。

实例

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;}p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;}p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;}

亲自试一试

HEX 值

您也可以使用十六进制值（HEX）指定轮廓颜色：

实例

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* 红色 */}

亲自试一试

RGB 值

或者通过使用 RGB 值：

实例

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 红色 */}

亲自试一试