认识达内从这里开始

一、边框属性

1、border:复合属性。设置对象边框的特性。

取值：

border-width: 设置或检索对象边框宽度。

border-style: 设置或检索对象边框样式。

border-color: 设置或检索对象边框颜色。

#border4

{

width: 100px;

height: 100px;

border:1px solid #FF0000;

}

2、border-width:设置对象的边框宽度。

取值：

meadium: 定义默认厚度的边框

thin: 定义比默认厚度细的边框。

thick: 定义比默认厚度粗的边框。

★ 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将用于全部的四边。

如果提供两个，第一个用于上、下，第二个用于左、右。

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

也可以分别对四边设置边框：

border-top-width 设置上边框宽度

border-bottom-width 设置下边框宽度

border-left-width 设置左边框宽度

border-right-width 设置右边框宽度

3、border-color：设置或检索对象的边框颜色

取值：

(1)英文单词的颜色，如“blue”、“red”

(2)十六进制值，如“#ffffff”、“#ff0000”

(3)rgba、rgb，如rgba(0,0,0，.5)、rgb(255,255,255)

4、border-style:设置对象的边框样式

取值：

none：无轮廓。border-color与border-width将被忽略

hidden：隐藏边框。IE7及以下尚不支持

dotted：点状轮廓。IE6下显示为dashed效果

dashed：虚线轮廓。

solid： 实线轮廓。

double：双线轮廓。两条单线与其间隔的和等于指定的border-width值

可以对四边分别设置其边框样式：

#border3

{

width: 200px;

height: 100px;

border: solid;

border-top-style:dotted ;

border-left-style:dashed ;

border-right-style: double;

border-bottom-style: solid;

}

5、border-radius:设置对象使用圆角边框

水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

如果只提供一个，将用于全部的于四个角。

如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。

如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

取值

length：用长度值设置对象的圆角半径长度。不允许负值

percentage：用百分比设置对象的圆角半径长度。不允许负值

CSS代码

#yj{

background-color:indianred ;

width: 100px;

height: 100px;

border-radius: 10px 10px 20px 20px;

}