css border-color属性设置边框的颜色

时间:2016-07-16
border-color属性用来定义HTML元素四个边框的颜色,对于颜色的取值,可以使用十六进制颜色值,也可以使用颜色名称。本文章向大家介绍border-color属性的使用方法和基本使用实例,需要的朋友可以参考一下。

border-color介绍

css border-color属性用来定义边框的颜色。此属性可以有一到四个值,各种情况如下:

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 如果border-width等于0或border-style设置为none,本属性将被忽略。

注意:请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

 

border-color属性值

css border-color属性的取值,可以使用十六进制颜色值,也可以使用颜色名称

说明
color 指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent 指定边框的颜色应该是透明的。这是默认
inherit 指定边框的颜色,应该从父元素继承

border-color实例

设置p元素四个边框颜色

<!DOCTYPE html>
<html>
<head>
<title>http://www.manongjc.com/article/1199.html</title>
<style>
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 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

在线运行

上一页 下一页

原文地址:http://www.manongjc.com/article/1199.html