一、边框（Border）
border：复合属性。设置对象边框的特性。
取值：border: line-width | line-style | color
1)line-width：设置或检索对象边框宽度。
2)line-width：设置或检索对象边框样式。
3)color:设置或检索对象边框颜色。
示例：
这里有边框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; border: 5px solid #000000; } </style> </head> <body> <div> <p>这里有边框</p> </div> </body> </html>
1、边框宽厚（border-width）：指定边框厚度。
取值：border-width：length | thin | medium | thick
1）length：用长度值来定义边框的厚度。不允许负值
2）medium：定义默认厚度的边框。计算值为3px
3）thin：定义比默认厚度细的边框。计算值为1px
4）thick：定义比默认厚度粗的边框。计算值为5px
border-width-top | border-width-bottom | border-width-left | border-width-right 分别指上、下、左、右 边框。
2、边框样式（border-style）：定义边框的样式
取值：border-style:line-style 效果如下：
- dotted:定义一个点线框
- dashed:定义一个虚线框
- solid:定义实线边界
- double:定义两个边界。 两个边界的宽度和border-width的值相同
- groove: 定义3D沟槽边界。效果取决于边界的颜色值
- ridge: 定义3D脊边界。效果取决于边界的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
- outset: 定义一个3D突出边框。 效果取决于边界的颜色值
border-top-style | border-bottom-style | border-left-style | border-right-style 分别指上、下、左、右 边框。
代码如下：（- -！算了 格式上面有，效果又有。）
3、边框颜色（border-color）：设置边框的颜色。可以设置的颜色。
取值：border-color:color(指定颜色)
这个边框有四种颜色
以上css代码如下：
div{ width: 70px; height: 70px; border-width: 5px; border-style: solid; border-top-color: red; border-right-color: blue; border-bottom-color: green; border-left-color: yellow; }
4、利用边框做出三角箭头：
div{ width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; border-right: 100px solid transparent; }
4、圆角效果（border-radius）：向元素添加圆角边框
所有角都是用半径为5px的圆角
div{ margin:5px; width: 50px; height: 50px; background: black; border-radius: 5px; }
四个半径值分别是左上角、右上角、右下角、左下角，顺时针
div{ margin: 5px; width: 50px; height: 50px; background: black; border-radius: 5px 4px 3px 2px; }
也可以分别设置每个角的垂直半径和水平半径，用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数左上角开始顺时针的垂直半径
div{ margin: 5px; width: 50px; height: 50px; background: black; border-radius: 5px 10px 15px 20px/3px 5px 10px 15px; }
圆
div{ margin: 5px; width: 50px; height: 50px; background: black; border-radius: 50%; }
半圆
div{ margin: 5px; width: 25px; height: 50px; background: black; border-radius: 50px 0 0 50px; }/*width是height的一半*/
5、边框图片（border-image）：边框样式使用图像填充。
取值：
border-image-source：设置或检索对象的边框是否用图像定义样式或图像来源路径。
border-image-slice：设置或检索对象的边框背景图的分割方式。
border-image-width：设置或检索对象的边框厚度。
border-image-outset：设置或检索对象的边框背景图的扩展。
border-image-repea：设置或检索对象的边框图像的平铺方式。
示例：
.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }
使用图像替代 <' border-style '> 去定义边框样式。当 <' border-image '> 为none或图像不可见时，将会显示 <' border-style '> 所定义的边框样式效果。
二、盒子阴影（box-shadow）：向盒子添加阴影。支持添加一个或者多个。
取值：box-shadow: X轴偏移量 Y偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
外阴影常规效果
div{ margin: 5px; width: 50px; height: 50px; background: red; box-shadow: 5px 5px rgba(0,0,0,.6); }
外阴影模糊外延阴影效果
div{ margin: 5px; width: 50px; height: 50px; background: red; box-shadow: 5px 5px 5px 5px rgba(0,0,0,.6); }
内阴影效果
div{ margin: 5px; width: 50px; height: 50px; background: red; box-shadow: 2px 2px 5px 1px rgba(0,0,0,.6) inset; }
双内阴影效果（两个阴影用逗号分开）
div{ margin: 5px; width: 50px; height: 50px; background: red; box-shadow: 2px 2px 5px 1px rgba(0,0,0,.6) inset,-2px -2px 5px 1px rgba(0,0,0,.6) inset; }
三、段落
1、行高（line-height）：控制段落内每行高度。
取值：line-height: normal | length
代码如下：
p{line-height:15px} p{line-height:150%}
2、段落缩进（text-indent）：控制段落的首行缩进。
取值：text-indent:lenght
代码如下：
p{text-indent:2em}
4、段落对齐（text-align）：控制段落对齐方式，不但是文本，对象中的其他inline或inline-block元素也能够被text-align进行对齐方式设置。
取值：text-align: left | right | center | justify(两端对齐)
代码如下：
p{text-align:right} p{text-align:center}
5、文字间距（letter-spacing）：控制段落文字间的间距。
取值：letter-spacing:normal | length
代码如下：
p{letter-spacing:5px;}
6、文字溢出（text-overflow）: 控制文字内溢出部分的样式。
取值：text-overflow:clip | ellipsis
1)clip：当内联内容溢出块容器时，将溢出部分裁切掉。
2)ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还必须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），
只有这样才能实现显示溢出文本显示省略号的效果。
代码如下：
原效果
以二三四五六七八九十
ellipsis效果
以二三四五六七八九十
p{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
7、段落换行（word-wrap）：控制内容超过容器的边界时是否断行。
取值：word-wrap: normal | break-word
1)normal：允许内容顶开或者溢出指定的容器边界。
2)break-word:内容将在边界内换行。如果需要，单词内部允许断行。
四、背景样式
background：复合属性。设置或检索对象的背景特性。元素的背景是元素的总大小，包括填充和边界（但不包括边距）
1、背景颜色（background-color）：设置一个元素的背景颜色。
取值：background-color:color(颜色)
如下：
div{ width:50px; height:50px; background-color:green; }
1.1、渐变色彩（linear-gradient）：CSS3 Gradient 分为线性渐变（linear）和径向渐变（radial）。
- 第一个参数省略时，默认为”180deg“，等同于”to bottom“。
- 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。（颜色值后面可以追加百分比，表示这个颜色要占总背景颜色的面积百分比）
div{ width: 100px; height: 100px; border: 1px solid black; background-image: linear-gradient(to left,red 30%,blue); }
2、背景图（background-image）：设置一个元素的背景图像。
取值：background-image: none | url(url)
3、背景平铺方式（background-repeat）：设置如何平铺对象的 background-image 属性。默认情况下，重复background-image的垂直和水平方向。
取值：background-repeat: repeat | no-repeat | repeat-x | repeat-y |
| 值 | 说明 |
|---|---|
| repeat | 背景图像将向垂直和水平方向重复。这是默认 |
| repeat-x | 只有水平位置会重复背景图像 |
| repeat-y | 只有垂直位置会重复背景图像 |
| no-repeat | background-image不会重复 |
| inherit | 指定background-repea属性设置应该从父元素继承 |
4、背景定位（background-position）：设置背景图像的起始位置。
取值：background-position: 左对齐方式 上对齐方式
| 值 | 描述 |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
如果仅指定一个关键字，其他值将会是"center" |
| x% y% | 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ |
| xpos ypos | 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
| inherit | 指定background-position属性设置应该从父元素继承 |
（- -！妈蛋！今天就写到这里了...困死了！- -！把感冒灵冲剂当成饮料喝了！）