1、text-shadow 文字阴影
p{
text-shadow:2px 2px 10px #000;
}
四个参数，依次：
a：水平偏移
b：垂直偏移
c：阴影程度
d：阴影颜色
2、word-break:break-all
解释：允许单词换行，是紧接前面内容
3、word-wrap:break-word
解释：允许单词换行，是先把单词换一行
4、white-space:nowrap
解释：强制文本不换行
5、text-overflow:ellipsis
解释：显示省略符号来代表被修剪的文本。
6、box-sizing：border-box
解释：其实就是把border和padding计算在width之内，也就是所说的怪异模式。
使用时：
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
7、background-clip
解释：规定背景的绘制区域
值有三个：
border-box 背景被裁剪到边框盒。（默认属性值）
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
举个栗子，比如border-box和padding-box的区别
border-box：
.box{
width:100px;
height:100px;
border:10px dashed red;
background: greenyellow;
background-clip: border-box;
}
效果：
padding-box：
.box{
width:100px;
height:100px;
border:10px dashed red;
background: greenyellow;
background-clip: padding-box;
}
效果：
8、background-origin
解释：background-origin 属性规定 background-position 属性相对于什么位置来定位。
值有三个：
border-box 背景图像相对于内边距框来定位。（默认属性值）
padding-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
举个栗子，比如padding-box和content-box的区别
padding-box:
.box{
width:250px;
height:250px;
border:10px dashed red;
background:greenyellow url(123.jpg) no-repeat;
background-origin:padding-box;
}
效果：
content-box：
.box{
width:210px;
height:210px;
padding:20px;
border:10px dashed red;
background:greenyellow url(123.jpg) no-repeat;
background-origin:content-box;
}
效果：
9、background-size:cover
解释：规定背景图像的尺寸，cover规定把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
栗子：
.box{
width:450px;
height:300px;
border: 1px solid #000;
background:greenyellow url(123.jpg) no-repeat;
}
这里盒子大小是450*300，而背景图片大小为300*200，自然没法填满，效果：
接下来添加属性：background-size:cover
.box{
width:450px;
height:300px;
border: 1px solid #000;
background:greenyellow url(123.jpg) no-repeat;
background-size:cover;
}
效果：
