位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > 边框颜色 border-color
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 边框宽度 border-width 下一篇: 边框 border 简写属性

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

image.png

属性定义及使用说明

border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

示例

小白教程网www.2d5.net

解析

border-color:红,绿,蓝,粉红色;

n  上边框是红色

n  右边框是绿色

n  底部边框是蓝

n  左边框是粉红色

border-color:红,绿,蓝;

 

n  上边框是红色

n  左,右边框是绿色

n  底部边框是蓝

border-color:红,绿;

n  顶部和底部边框是红色

n  左右边框是绿色

border-color:红色;

n  所有四个边框是红色

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

默认值:

not specified

继承:

no

版本:

CSS1

JavaScript 语法:

object   object.style.borderColor="#FF0000 blue"

属性值

说明

color

指定背景颜色。

transparent

指定边框的颜色应该是透明的。这是默认

inherit

指定边框的颜色,应该从父元素继承

实例

代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>边框颜色border-color</title>

<!--定义内部样式-->

<style>

     .css1

     {

             border-style:solid;  /*实线*/

             border-color:#0000ff;/*边框颜色*/

     }

     .css2

     {

             border-style:solid;/*实线*/

             border-color:#ff0000 #0000ff;/*边框颜色*/

     }

     .css3

     {

             border-style:solid;/*实线*/

             border-color:#ff0000 #00ff00 #0000ff;/*边框颜色*/

     }

     .css4

     {

             border-style:solid;/*实线*/

             border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);/*边框颜色*/

     }

     </style>

</head>

<body>

    

     <p>Web入门课程</p>

     <p>html入门到精通</p>

     <p>css入门到精通</p>

     <p>javascript入门到精通</p>

     <p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>

    

</body>

</html>

效果图

小白教程网www.2d5.net

image.png


上一篇: 边框宽度 border-width 下一篇: 边框 border 简写属性
毕业设计网             广告联系QQ:45157718(微信同号)