CSS边框属性

一、边框的属性

 (一)、边框
  1、简写方式
    通过一个属性来控制四个方向的边框效果

border：width style color;

		width：宽度; 可以改变边框的粗细，以px为单位。
		style：样式; 可以定义边框样式。
					取值：solid：实线
						 dotted：虚线
						 dashed：虚线
		color：颜色; 可以改变边框的颜色。
					取值：合法的颜色值(#rrggbb,rgb(x,x,x))

border:none;或者border:0; 可以取消元素边框！！

  2、单边定义
    定义某一方向的边框。
    属性： border-方向：width style color;
    方向英文：top(上),right(右),left(左),bottom(下)。
ex:

border-left:1px solid red;
		//这行代码的意思就是定义左边框的大小为1像素，线条样式为实线，线条的颜色为红色。

  3、单属性定义
    用一个属性来定义四个边框。
    语法：border-属性:值;
    属性：width、style、color
ex：

border-color:#00f;
	//定义四个边框的颜色。

border-bottom:dotted;
	//定义四个边框的样式。

  4、单边单属性定义
    用一个方向一个属性来定义边框。
    语法：border-方向-属性:值;
ex：

boder-left-color:red;
	//定义左边框的颜色为红色。

border-bottom-style:dotted;
	//定义底部边框的样式为虚线。

 (二)、边框倒角
    四个方向的角倒成圆角。
    属性：border-radius
    取值：绝对数值 或 百分比
ex：

border-radius:5px;
	//将四个边的角倒成大小为5px的圆角。
border-radius:50%;
	//将四个边的角倒成大小为当前元素宽度的50%(如果当前元素宽和高相等的话，则能将当前元素改为圆形)

倒角可以也可以单独进行定义：

border-top-left-radius:值 			//左上角
border-top-right-radius:值			//右上角
border-bottom-left:值				//左下角
border-bottom-right:值				//右下角

 (三)、边框阴影
  属性：box-shadow
  他的取值有：h-shadow、v-shadow、blue、spread、color、inset;
        h-shadow：阴影的水平偏移距离， +为右偏移， -为左偏移(必须要有的！)
        v-shadow：阴影的垂直偏移距离， +为下偏移， -为上偏移(必须要有的！)
        blur：模糊距离
        color：颜色
        inset：默认的外阴影改为内阴影(他本身就是一个值)

ex：

效果如下：

 (四)、轮廓
    作用：绘制于元素周围的一条线，位于外边框外。
    他的属性为：outline:width style color;
    outline-width：轮廓的宽度。
    outline-style：轮廓的样式。
    outline-color：看轮廓的颜色。
    outline:none; 或者 outline:0; 他两个的作用相同都是用来取消元素的轮廓。

效果如下：