css border-color边框颜色属性笔记

原创 PHP笔记  2017-11-25 11:25  阅读 1,643 views 次

css中,border-color属性是用来设置元素的四个边框颜色,可以有一到四个值。

border-color属性一到四个值详解

1、一个值

border-color属性的属性值如果只有一个值,那么该属性定义的四个边框颜色都为该值的颜色。

语法格式:

border-color:颜色;

2、两个值

border-color属性的属性值如果有两个值,那么该属性定义的顶部和底部边框是第一个值的颜色,左右边框是第二个值的颜色。

语法格式:

border-color:颜色1 颜色2;

3、三个值

border-color属性的属性值如果有三个值,那么该属性定义的上边框是是第一个值的颜色;左,右边框是第二个值的颜色;底部边框是第三个值的颜色。

语法格式:

border-color:颜色1 颜色2 颜色3;

4、四个值

border-color属性的属性值如果有四个值,那么该属性定义的上边框、右边框、底部边框、左边框的颜色分别为第一个值的颜色、第二个值的颜色、第三个值的颜色、第四个值的颜色。

语法格式:

border-color:颜色1 颜色2 颜色3 颜色4;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css border-color边框颜色属性笔记</title>
<style>
p{border-style:solid;}
#bc1{border-color:red;}
#bc2{border-color:red blue;}
#bc3{border-color:red blue black;}
#bc4{border-color:red blue black yellow;}
</style>
<head/>
<body>
<p id="bc1">border-color属性值为1个演示</p>
<p id="bc2">border-color属性值为2个演示</p>
<p id="bc3">border-color属性值为3个演示</p>
<p id="bc4">border-color属性值为4个演示</p>
</body>
</html>

运行结果:

更多边框属性

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/border-color.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情