设置CSS 轮廓颜色

 2022-03-13    529  

在77ISP学技术

每日笔记,设置css轮廓颜色

设置CSS 轮廓颜色

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: #00BFFF; /* 深天蓝 */
}

4 像素的粗轮廓。77ISP


RGB 值

或者通过使用 RGB 值:


实例

p.ex1 {
  outline-style: solid;
  outline-color: rgb(0,191,255); /* 深天蓝 */
}

4 像素的粗轮廓。77ISP


HSL 值

您还可以使用 HSL 值:


实例

p.ex1 {
  outline-style: solid;
  outline-color: hsl(195, 100%, 50%); /* 深天蓝 */
}

4 像素的粗轮廓。77ISP


反转颜色

下例使用 outline-color: invert,执行了颜色反转。这样可以确保无论颜色背景如何,轮廓都是可见的:


实例

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}


4 像素的粗轮廓,与背颜色景翻转。77ISP

  •  标签:  
  • css
  •  

原文链接:https://77isp.com/post/387.html

=========================================

https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。