border-color属性设置单边边框和综合四边边框颜色

Web前端培训实操环节中，同学们经常会遇到边框的颜色设置问题。border-color属性用于设置边框的颜色，其取值可为预定义的颜色英文单词(如red、blue)、十六进制颜色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括号里是颜色色值或百分比)，实际工作中最常用的是十六进制颜色值。

边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，例如只包含图像的表格，其默认边框颜色为父元素的文本颜色。与边框样式和宽度相同，边框颜色的单边与综合设置方式如下。

border-top-color:上边框颜色;
border-right-color:右边框颜色;
border-bottom-color:下边框颜色;
border-left-color:左边框颜色;
border-color:上边框颜色[右边框颜色下边框颜色左边框颜色];

综合设置四边颜色必须按顺时针顺序采用值复制原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。

例如设置段落的边框样式为实线，上下边灰色，左右边红色，代码如下。

p
{border-style:solid;            /*综合设置边框样式*/
border-color:#CCC#FF0000;    /*设置边框颜色：两个值为上下、左右*/
}

再如设置二级标题的边框样式为实线，且下边框为红色，其余边框采用默认文本的颜色，代码如下。

h2{
border-style:solid;           /*综合设置边框样式*/
border-bottom-color:red;      /*单独设置下边框颜色*/
}

注意：

1、设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none，则其他的边框属性无效。

2、使用rgb模式设置颜色时，如果括号里面的数值为百分比，必须把“0”也加上百分号，写作“0%”

多学一招：巧用边框透明色(transparent)

CSS2.1将元素背景延伸到了边框，同时增加了transparent透明色。如果需要将已有的边框设置为暂时不可见，可使用“border-color:transparent;”，这时如同没有边框，看到的是背景色，需要边框可见时再设置相应的颜色，这样可以保证元素的区域不发生变化。这种方式与取消边框样式不同，取消边框样式时，虽然边框也不可见，但是这时边框的宽度为0，即元素的区域发生了变化。

border-color属性设置单边边框和综合四边边框颜色相关推荐

ECharts color属性设置（不透明度，透明度，线性渐变，径向渐变，扇形渐变，纹理填充）
1 不透明度 1.1 颜色英文名示例: color:'red' 1.2 十六进制格式有两种表示方式. 第一种为#+6位十六进制数,前2位表示红色,中间2位表示绿色,后2位表示蓝色. 第二种为#+3 ...
网页中表格的用法和属性设置
网页中的表格有四种标签:<table>,<tbody>,<tr>,<th>,<td> <table>:表格的主体标签,有这个标签 ...
fillstyle属性_html设置或返回用于填充绘画的颜色渐变或模式的属性fillStyle
实例定义用蓝色填充的矩形: JavaScript:var c=document.getElementById("myCanvas"); var ctx=c.getContext( ...
如何使用graphpad做柱形图_Graphpad Prism 8作图教程（2）：XY图的属性设置
Prism 可以对一幅图的每一个属性进行自定义.改发标志的形状,颜色和大小:改发柱形图的填充模式和颜色:改发数据组绘图的顺序等. 本文主要介绍以下内容: 1.XY图的外观 2.数据组的前后顺序 3.使 ...
HTML学习笔记之CSS属性设置（一）
一.设置字体样式 1.字体属性 1),font-family(字体系列) 本属性描述了用何种字体系列来显示文字,可以为文字指定一种或多种字体,属性值为用逗号分隔的字体名称列表. 例如: p{font- ...
css样式向下补白,div+css[3]：css中边框border与补白padding属性设置
1.边框属性 border □ 边框样式 border-style:none|dotted|dashed|solid|...... none:没有边框. dotted点线 dashed虚线 solid ...
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
CSS属性详解——使用border属性设置边框
CSS 是一种用于网页布局控制的语言,其中 border 属性用于为网页元素设置边框样式.颜色和宽度等.在本文中,我们将深入介绍 border 属性的详细语法和使用方式,帮助您轻松掌握使用. bord ...
html盒模型中border的写法,【前端】盒子模型的边框样式属性和应用技巧讲解
分割页面中不同的盒子,常常需要给元素设置边框效果.在CSS中边框属性包括边框样式属性(border-style).边框宽度属性(border-width).边框颜色属性(border-color).单 ...
css样式如何设置边框，阴影，渐变等特效以及通过box-sizing属性设置盒子模型，背景区域设置等
今天,我继续来和大家聊聊css3. 在css3中,新增了很多样式,使得页面更加的美观,效果更加的优秀. 但是,同样要注意的是,很多css3提出的新样式没有得到浏览器的支持,也就意味着有一部分的css3 ...

border-color属性设置单边边框和综合四边边框颜色

border-color属性设置单边边框和综合四边边框颜色相关推荐

最新文章

热门文章