20160811

一：边框样式

　　1.边框线

　　例：div { width:300px; height:100px; border-style:solid; ｝

　　　　　　　　 border-top-style 设置上边框线

　　　　　　　　border-bottom-style 设置下边框线

　　　　　　　　border-left-style 设置左边框线

　　　　　　　　border-right-style 设置右边框线

　　2.边框宽度

　　border-width : medium | thin | thick | length

　　例：

　　div { width:300px; height:100px; border-style:solid; border-width:1px; ｝

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

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

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

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

　　3.边框颜色

　　border-color : color

　　例：div {width:300px;

　　height:100px;

　　border-style:solid;

　　border-width:1px;

　　border-color:#FF0000;

　　}

　　 border-top-color 设置上边框颜色

　　border-bottom-color 设置下边框颜色

　　border-left-color 设置左边框颜色

　　border-right-color 设置右边框颜

　　4.边框样式缩写

　　border : border-width || border-style || border-color

　　例：

　　div {

　　width:300px;

　　 height:100px;

　　 border-style:solid;

　　border-width:1px;

　　border-color:#FF0000;

　　}

　　缩写后：

　　div {

　　width:300px;

　　 height:100px;

　　 border:1px solid #FF0000;

　　}

　　5.圆角效果

　　border-radius : [ <length> | <percentage> ]{1,4} [ / 　　

　　 [ <length> | <percentage> ]{1,4} ]?

　　向元素添加圆角边框。

　　　　例子：

　　/* 所有角都使用半径为10px的圆角 */

　　div{ border-radius:10px;}

　　/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

　　div{ border-radius: 5px 4px 3px 2px; }

　　/*也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径*/

　　div{ border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }　

　　/*圆*/

　　div{ border-radius:50% }

　　6.边框图片(课外扩展)

　　border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat'>

　　边框样式使用图像来填充。

　　注意：

　　border-image-slice ：是一个数值或百分比，不需要带单位（特指px）

　　设置了border-image之后，border-style则不显示

　　例子：

　　.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }

　　7.盒子阴影(课外扩展)

　　box-shadow :none | <shadow> [ , <shadow> ]*

　　<shadow> = inset? && <length>{2,4} && <color>?

　　box-shadow是向盒子添加阴影。支持添加一个或者多个。

　　使用方法：

　　box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];　

　　例：

　　.outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); } /*外阴影常规效果*/

　　.outset-blur{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); }/*外阴影模糊外延效果*/

　　.inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; } /*内阴影效果*/

二：段落样式

　　1.行高

　　控制段落内每行高度

　　line-height : normal | length

　　例：

　　p { line-height:25px;}

　　p { line-height:150%}

　　2.段落缩进

　　控制段落的首行缩进

　　text-indent : length

　　例：

　　 p { text-indent:2em;}

　　3.段落对齐

　　控制段落对齐方式，不但是文本，对象中的其它inline或inline-block元素也能够被text-

　　align进行对齐方式的设置。

　　text-align : left | right | center | justify

　　例：

　　p { text-align:right;}

　 p { text-align:center;}

　　4.文字间距

　　控制段落的文字间的距离

　　letter-spacing : normal | length　　

　　例：

　　p { letter-spacing:5px;}

　　5.文字溢出

　　控制文字内容溢出部分的样式

　　语法：

　　text-overflow：clip | ellipsis

值	描述
clip	当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis	当内联内容溢出块容器时，将溢出部分替换为（...）。