整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS border-bottom-color 属性

设置底部边框颜色:

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-color1.04.01.01.03.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 圆角

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设置的属性如下:

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 图片

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开课啦!

当你感到悲哀痛苦时,最好是去学些什么东西。学习会使你永远立于不败之地。

关注小白前端,持续收到文章推送!