CSS常用样式（二）

一、边框属性

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

　　取值：

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

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

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

#border4 {   width: 100px;   height: 100px;   border:1px solid #FF0000; }

<div id="border4"></div>

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

　　取值：

　　meadium: 定义默认厚度的边框

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

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

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

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

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

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

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

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

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

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

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

<style>        #border1{  width:200px;  height:100px;  border:solid;  /*border-width: 5px;*/  border-width:2px 3px 4px 5px ;              }</style>

<div id="border1"></div>

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

　　取值：

　　（1）英文单词的颜色，如“blue”、“red”

　　（2）十六进制值，如“#ffffff”、“#ff0000”

　　（3）rgba、rgb，如rgba（0,0,0，.5）、rgb（255,255,255）

<style>        #border2   {     width: 200px;     height: 100px;     border: solid;           border-color: #FF0000;          }</style>

<body>    <div id="border2"></div>    </body>

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;   }

<div id="border3"></div>

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;              }HTML代码：<div id="yj"> </div>