1.@font-size
客户端写法
<p >这是客户端字体写法</p>服务器端写法
多个值时用逗号隔开
@font-size{font-family: BorderWeb;src:url(BORDERW0.eot);}
.p{font-size: 12px;font-family:"BorderWeb",'黑体','宋体'; }
<p class="p">能是一份完整的文档，也可能是一个chunk，</p>
2.word-wrap属性
<div >
加入了“word-wrap: break-word”，设置或检索当前行超过指定容器的边界时是否断开转行，文字此时已被断开。
</div>word-spacing 字与字之间的间距
word-spacing:30px;
3.text-overflow 对象内文本溢出时显示省略标记
.ellipsis{overflow: hidden; text-overflow:ellipsis; white-space: nowrap;width:200px;}
<div class="ellipsis">当对象内文本溢出时显示省略标记</div>4.text-decoration 文字渲染
white-space 属性指定元素内的空白怎样处理。
.div{overflow: hidden;
text-overflow:ellipsis; /*当对象文本溢出时显示省略号*/
white-space: nowrap; /*文本不会换行，直到遇到<br>*/
-webkit-text-fill-color:black; /*文字内部填充颜色*/
-webkit-text-stroke-color:red; /*文字边界填充颜色*/
-webkit-text-stroke-width:1px; /*文字边界宽度*/
font-size: 30px;
width:300px;
}
<div class="div">
浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，渲染树根据渲染树就会绘制到浏览器上。构建dom树的过程即根据html代码自上而下构建dom树，当遇到script文件加载／执行会阻塞后面dom树的构建
</div>5.多列布局
.div3{
-webkit-column-count:3;/*表示布局几列*/
-webkit-column-rule:1px solid #ccc;/*表示列与列之间的间隔条的样式*/
-webkit-column-rap:10px;/*表示列与列之间的间隔*/
}
<div class="div3">
浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，渲染树根据渲染树就会绘制到浏览器上。构建dom树的过程即根据
<p>html代码自上而下构建dom树，当遇到script文件加载／执行会阻塞后面dom树的构建（JavaScript可能会改变dom树），而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），</p>但不会渲染绘制到页面上。而无论哪个阻塞，该加载的文件还是会加载，例如html文档中的其他css／js／图片文件。至于javascript被加载后就会被执行，执行的过程也阻塞树的构建。是执行完了才解析其他内容，而不是执行完了才加载其他内容。
</div>6.border-radius:5px; 圆角
7.text-shadow 文字阴影
text-shadow:x轴方向阴影 y轴方向阴影 阴影模糊程度 阴影模糊颜色
8.box-shadow 边框阴影 （和文字阴影参数一样,x轴和y轴为0的时候，四周都有阴影）
9.reflect 反射效果
.p{
font-size: 20px;
font-family:"BorderWeb";
text-shadow:5px 5px 2px rgba(64,64,64,.5);
-webkit-box-reflect:below 10px; /*表示反射在元素下方10px*/
-webkit-gradient(linear, left top, left bottom, from(transparent),
to(rgba(255, 255, 255, 0.51))); /*反射元素的过渡效果*/
}
.div{
box-shadow: 2px 2px 2px rgba(64,64,64,.3);
width:200px;
height:200px;
border-radius:5px;
}
<div class="div">
<p class="p">能是一份完整的文档，也可能是一个chunk，</p>
</div>10.gradient 渐变效果 linear