20160811
一：边框样式
1.边框线
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
例：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 |
当内联内容溢出块容器时，将溢出部分替换为（...）。 |
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示 （white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
例子：
div,input{
overflow: hidden; /*条件1：超出部分隐藏*/
white-space: nowrap;/*条件2：强制在同一行内显示所有文本*/
text-overflow: ellipsis;/*超出部分显示。。。*/
6.段落换行
控制内容超过容器的边界时是否断行
语法：
word-wrap：normal | break-word
三：背景样式
