css border-color属性怎么用?

2024-01-17 15:57 小编

     CSSborder-color属性

 

  作用:border-color属性用于设置一个元素边框颜色,可以设置1~4个值:

 

  border-color:redgreenbluepink;

 

  ●上边框是红色

 

  ●右边框是绿色

 

  ●下边框是蓝色

 

  ●左边框是粉红色

 

  border-color:redgreenblue;

 

  ●上边框是红色

 

  ●左,右边框是绿色

 

  ●下边框是蓝色

 

  border-color:redgreen;

 

  ●上、下边框为红色

 

  ●左、右边框为绿色

 

  border-color:red;

 

  ●所有四个边框都为红色

 

  注:需要在border-color属性之前声明border-style属性的,因为元素必须在改变其颜色之前获得边框。且border-style属性的值不能为none或hidden,否则边框不会出现,border-color属性无法生效。

 

  CSSborder-color属性的使用示例

 

  <!DOCTYPEhtml>

 

  <html>

 

  <head>

 

  <metacharset="utf-8">

 

  <title>php中文网(php.cn)</title>

 

  <styletype="text/css">

 

  p.one

 

  {

 

  border-style:solid;

 

  border-color:#0000ff

 

  }

 

  p.two

 

  {

 

  border-style:solid;

 

  border-color:#ff0000#0000ff

 

  }

 

  p.three

 

  {

 

  border-style:solid;

 

  border-color:#ff0000#00ff00#0000ff

 

  }

 

  p.four

 

  {

 

  border-style:solid;

 

  border-color:#ff0000#00ff00#0000ffrgb(250,0,255)

 

  }

 

  </style>

 

  </head>

 

  <body>

 

  <pclass="one">一个蓝色边框!</p>

 

  <pclass="two">一个彩色边框!</p>

 

  <pclass="three">一个彩色边框!</p>

 

  <pclass="four">一个彩色边框!</p>

 

  <p><b>注:</b>"border-width"属性如果单独使用的话是不会起作用的。请首先使用"border-style"属性来设置边框。</p>

 

  </body>

 

  </html>


image.png



Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码