导航
×
   ❮   
HTML CSS JavaScript PHP Go ECMS

CSS 边框颜色


CSS 边框颜色

border-color 属性用于设置四个边框的颜色。

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

  • name - 指定颜色名,比如 "red"
  • HEX - 指定十六进制值,比如 "#ff0000"
  • RGB - 指定 RGB 值,比如 "rgb(255,0,0)"
  • HSL - 指定 HSL 值,比如 "hsl(0, 100%, 50%)"
  • transparent

注释: 如果未设置 border-color ,则它将继承元素的颜色。

实例

演示不同的边框颜色:

p.one{
   border-style: solid;
   border-color: red;
}

p.two{
   border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color:   blue;
}

结果:

红色实线边框
绿色实线边框
蓝色点状边框
亲自试一试 »

特定边框的颜色

border-color 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。

实例

  p.one {
  border-style: solid;
  border-color: red green blue yellow;  /* 上红、右绿、下蓝、左黄 */
}
亲自试一试 »

HEX 值

边框的颜色也可以使用十六进制值(HEX)来指定:

实例

  p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}
亲自试一试 »

RGB 值

或者使用 RGB 值:

实例

  p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0);   /* red */
}
亲自试一试 »

HSL 值

也可以使用 HSL 值:

实例

  p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%);   /* red */
}
亲自试一试 »

您可以在我们的 CSS 颜色 章节中学到有关 HEX、RGB 和 HSL 值的更多知识。


freew3c.com 中文网是独立运营的中文开发者学习平台,与 freew3c.com 无关联。提供的内容仅用于学习和测试,不保证内容的正确性。


Copyright @2020-2026 京ICP备888888号-8