- border-width
- border-color
- border-style
border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。
border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。
border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
1 /* 设置5px的灰色实线边框 */
2 p{
3 border-width: 5px 5px 5px 5px;
4 border-color: #ccc;
5 border-style: solid;
6 }
7
8 <p>border-width: 5px 5px 5px 5px;
9 border-color: #ccc;
10 border-style: solid;</p>
- border
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
- border-width
- border-style
- border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
1 /* 设置5px的灰色实线边框 */
2 p{
3 border: 5px solid #ccc;
4 }
5
6 <p>border: 5px solid #ccc</p>
- border-radius
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性。
- 语法
border-radius: 1-4 length|% / 1-4 length|%;
注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
1 /* 设置各半径为5px的圆角 */
2 p{
3 border-radius: 5px;
4 }
5
6 <p>border-radius: 5px</p>
- border-image
border-image 属性是一个简写属性，用于设置以下属性：
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
如果省略值，会设置其默认值。
1 /* 设置图像边框 */
2 p{
3 border-image: url(button.png) 0 14 0 14 stretch;
4 }
5
6 <p>border-image: url(button.png) 0 14 0 14 stretch</p>
- box-shadow
box-shadow 属性向边框添加一个或多个阴影。
- 语法
box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
1 /* 设置向下右偏移5px的黑色阴影 */
2 p{
3 box-shadow: 5px 5px 10px #000;
4 }
5
6 <p>box-shadow: 5px 5px 10px #000</p>
- line-height
line-height 属性设置行间的距离（行高）。
注释：不允许使用负值。
- 说明
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
1 /* 设置20px的行高 */
2 p{
3 line-height: 20px;
4 }
5
6 <p>line-height: 20px</p>
- text-indent
text-indent 属性规定文本块中首行文本的缩进。允许使用负值。如果使用负值，那么首行会被缩进到左边。
1 /* 设置两字符宽的缩进 */
2 p{
3 text-indent: 2em;
4 }
5
6 <p>text-indent: 2em</p>
- text-align
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
1 /* 设置文字左对齐 */
2 p{
3 text-align: left;
4 }
5
6 <p>text-align: left</p>
- letter-spacing
letter-spacing 属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
1 /* 设置5px的字符间隔 */
2 p{
3 letter-spacing: 5px;
4 }
5
6 <p>letter-spacing: 5px</p>
- text-overflow
控制文字内容溢出部分的样式。
text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
1 /* 设置当字符超出容器宽度时显示为省略号 */
2 p{
3 overflow: hidden;
4 white-space: nowrap;
5 text-overflow: ellipsis;
6 }
7
8 <p>overflow: hidden;white-space: nowrap;text-overflow: ellipsis;</p>
- word-wrap
控制内容超过容器的边界时是否断行。值为normal时允许内容顶开或溢出指定的容器边界。值为break-word时内容将在边界内换行。如果需要，单词内部允许断行。
1 /* 设置自动换行 */
2 p{
3 word-wrap: break-word;
4 }
5
6 <p>word-wrap: break-word</p>
- background-color
background-color 属性设置元素的背景颜色。
元素背景的范围
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
1 /* 设置背景色为灰色 */
2 p{
3 background-color: #ccc;
4 }
5
6 <p>background-color: #ccc</p>
- background-image
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
1 /* 设置背景图片 */
2 p{
3 background-image: url(bgimage.jpg);
4 }
5
6 <p>background-image: url(bgimage.jpg)</p>
- background-repeat
设置如何平铺对象的 background-image 属性。
默认情况下，重复background-image的垂直和水平方向。
1 /* 设置x轴重复背景图片 */
2 p{
3 background-image: url(bgimage.jpg);
4 background-repeat: repeat-x;
5 }
6
7 <p>background-image: url(bgimage.jpg);background-repeat: repeat-x</p>
- background-position
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。
1 /* 设置背景图片起始位置为左上角 */
2 p{
3 background-image: url(bgimage.jpg);
4 background-position: left top;
5 }
6
7 <p>background-image: url(bgimage.jpg);background-position: left top</p>
- background
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url(‘smiley.gif‘); 也是允许的。
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
1 /* 简写设置背景图片 */
2 p{
3 background:url(bgimage.jpg) no-repeat left top;
4 }
5
6 <p>background:url(bgimage.jpg) no-repeat left top</p>