• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS border-color 属性使用方法

CSS border-color 属性使用方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,border-color等相关知识,佚名 希望在学习及工作中可以帮助到您
border-color -- 定义四个边框的颜色
取值:[ <color> | transparent ]{1,4} | inherit
<color>{1,4}: 颜色表示法
transparent{1,4}: 透明
inherit: 继承
初始值: 同color属性的默认值
继承性: 否
适用于: 所有元素
border:边框,color:颜色.
border-color和border-width的赋值方式是一样的,可以分别赋1,2,3或4个颜色值.

示例
p#fourborders
{
border-color:red black blue green;
}
如果定义四个值,那么这四个值就分别是上,右,下,左边框(从上边框开始,以顺时针的顺序遍历).定义梦之都段落的上边框为红色,右边框为黑色,下边框为蓝色,左边框为绿色.

p#threeborders
{
border-color:red black blue;
}
如果只定义三个值,中间的值代表左和右边框.定义梦之都段落的上边框为红色,下边框为蓝色,左,右边框为黑色.

p#twoborders
{
border-color:red black;
}
如果只定义两个值,前面的值代表上下边框,后面的值代表左右边框.定义梦之都段落的上,下边框为红色,右,左边框为黑色.

p#oneborders
{
border-color:red;
}
如果只定义一个值,这个值就代表四个边的.定义梦之都段落的边框为红色.

微课江湖提示: 当不设置边框颜色border-color时,边框的颜色使用此元素的color属性的值.

p#bordercolor
{
border-bottom:solid;
color:red;
}
上例中,由于没有设定border-color的值,因此取color的值红色.

css border-color 属性示例 -- 使用color的颜色值.

微课江湖提示: 由于CSS属性具有覆盖的特性,所以设置的顺序很重要.

p
{
border:medium solid green;
border-bottom:solid;
color:red;
}
上例中,下边框的颜色为红色,其它边框为绿色.因为border-bottom没有设置颜色,所以应该取color指定的颜色.

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS中针对IE6、7和FF等浏览器的特殊样式写法
  • 2017-08-06区别各种IE浏览器的css写法
  • 2017-08-06HTML DIV+CSS制作通栏实例
  • 2017-08-06CSS3过渡transition效果实例介绍
  • 2017-08-06优秀的CSS 框架整理
  • 2017-08-06css移动端实现与pc端一样的:acitve效果
  • 2017-08-06DIV+CSS相对IE6 IE7和IE8浏览器行为区别及兼容性问题整理
  • 2017-08-06CSS在固定宽高的div内实现垂直居中的实例详解
  • 2017-08-06CSS3制作缩略图的详细过程
  • 2017-08-06子Div使用Float后撑开父Div的几种方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS中使用clearfix清除浮动的方法
    • CSS教程 CSS选择器
    • 让横向排列的几个浮动(float:left)的子div居中显示
    • CSS定位的几个类型简单介绍
    • css设置矢量图字体图标的方法(图解)
    • 总结CSS的position定位属性在使用的一些重点
    • div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...
    • IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
    • CSS3实现头像旋转效果
    • CSS 柱状图实现代码其实很简单

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有