首页手记学习css3新特性，简单有用的案例

学习css3新特性，简单有用的案例

标签：

CSS3

1.@font-size
客户端写法

<p style="font-family:'宋体';">这是客户端字体写法</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 style="width:300px; border:1px solid #999999; word-wrap:break-word;"> 
加入了“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