例
设置底部边框颜色:
p{border-style:solid; border-bottom-color:#ff0000;}
标签定义及使用说明
border-bottom-color属性设置元素的底部边框颜色。
注意 使用border-bottom颜色属性前,必须先声明border样式属性。元素必须有边框,你才可以改变颜色。
默认值: | not specified |
---|---|
继承: | no |
版本: | CSS1 |
JavaScript 语法: | objectobject.style.borderBottomColor="blue" |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
border-bottom-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Property Values
值 | 描述 | 测试 |
---|---|---|
color | 指定背景颜色。在CSS 颜色值 查找颜色值的完整列表。 | |
transparent | 指定边框的颜色应该是透明的。这是默认 | |
inherit | 指定边框的颜色,应该从父元素继承 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
建企业网站的时候,会用到一些边框,无论是表格或是div,布局的时候边框可以做为一个分界线,让内容对比或衬托更加明显。边框的使用其实也很简单,一个是边框的粗细,另一个是边框的颜色。可以对局部整体设置,也可以单独设置上下左右四个方向的边框。在CSS中有一个关于颜色的属性:border-color,它一次可以接受最多4个颜色值。
border-color值:[<color>|transparent]{1,4} | inherit 初始值:对简写属性未定义计算值:单个属性(border-top-color,顶部边框颜色)
如果网页设计的边框值小于4个,值复制就会起作用。如果设计人员希望h1元素有细的黑色上下边框,而且有粗的灰色左右边框,在CSS样式中应该这样写:
h1{border-style:solid;border-width:thin thick;border-color:black gray;}
当然一个颜色值会应用到所有4个边,如果应用了4个颜色值,那么每边都会有不同的颜色。可以使用任何类型的颜色值,例如可以是命名颜色,也可以是十六进制和RGB值:
p{ border-style:solid;border-width:thick; border-color:black rgb(25%,25%,25%)#808080 silver;}
也可以使用简写的方式一次性定义多个边框,比如对某一个段落P进行设置:
P{ border:#cecece 1px solid; //四个边框均为灰色1px }
还有一些单边border-color属性。其原理与单边样式和宽度属性相同。网站建设人员要为标题指定一个实线黑色边框,而且右边框为实线灰色,可以如下指定:
P{border-style:solid;border-color:black;border-right-color:gray;}
边框四个方向对应的属性名称:
顶部border-top-color、右侧border-right-color、底部border-bottom-color、 左侧border-left-color
透明边框的使用:
在有些情况下网页制作人员可能想创建一个不可见的边框。这就引人了边框颜色值transparent(在CSS2中引入)。这个值用于创建有宽度的不可见边框。假设你希望包含3个链接的一组链接有边框,默认地这些边框不可见,不过,鼠标停留在链接上时边框要凸起。为此可以让边框在链接处于非悬停状态下透明:
a:link, a:visited { border-style: solid; border-width: 5px; border-color: transparent;} a:hover {border-color: gray;}
利用transparent,使用边框就像是额外的内边距一样,此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区(假设有可见的背景)。
警告:在IE7之前,IE/Win没有提供对transparent的支持。在以前的版本中,IE会根据元素的color值来设置边框颜色。
SS3 的边框属性可以给创建圆角的盒子,也可以给盒子设置阴影,用图片美化盒子。
border-radius可以给元素设置圆角。
如下,一个div元素:
<div class="box">border-radius可以给元素设置圆角。</div>
我们给它加一点样式,并设置它的border-radius为15px:
.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
}
浏览器中查看效果:
border-radius也可以给它四个角分别设置角度,四个值依次代表左上,右上,右下,左下:
border-radius: 15px 15px 0px 0px;
box-shadow可以为元素设置边框阴影。box-shadow设置的属性如下:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影的位置,可以是负值。
v-shadow 垂直阴影的位置,可以是负值。
blur 模糊距离。
spread 阴影的尺寸。
color 阴影的颜色。
inset 将外部阴影 (outset) 改为内部阴影。
以上 h-shadow ,v-shadow是必须要设置的,其他的可以根据需要去设置。
我们给上面的div元素添加阴影:
<div class="box"></div>
css样式:
.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
}
浏览器中查看效果:
border-image 使用图片设置边框。
如下:
<div class="box"></div>
我们先给div元素的边框颜色设置为透明(transparent),然后在使用图片设置边框:
.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
}
看一下效果:
童靴们可能不懂为啥属性的前边会有-webkit-、-o-这样的前缀呢?这是因为好多浏览器都不支持CSS的新特性,所以写这些专属的前缀是为了兼容各浏览器。
上一篇CSS3文章最后也讲过各浏览器的前缀,童靴们自己去看一下。
css3 入门简介 ——css3开课啦!
当你感到悲哀痛苦时,最好是去学些什么东西。学习会使你永远立于不败之地。
关注小白前端,持续收到文章推送!
*请认真填写需求信息,我们会在24小时内与您取得联系。