CSS3必会用法

css3
1、box-sizing
可以很好的解决盒模型的兼容性bug。
1.1、盒模型
以chrome为代表的浏览器的标准盒模型:
（设置宽度）elemetn.width = border.width + padding.width + content.width(元素文档中实际占据位置宽度);
ie浏览器的盒模型如下:
（设置宽度）elemetn.width = border.width + padding.width + content.width(元素实际宽度);
1.2、取值
content-box|border-box|inherit
a)、content-box
元素的宽高赋值赋值给的是元素的content-box,在宽高度之外绘制元素的内边距和边框
b)、border-box
元素的宽高赋值赋值给的是元素的内容和内边距及边框，及在宽高度之内绘制元素的内边距和边框
c)、inherit
从父元素继承box-sizing属性
1.3、使用方法

div{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
}

2、::before及::after伪元素
定义在一个元素的内容之前插入content属性定义的内容与样式。
使用方法:

p::before{
    content:'《';//定义元素前插入内容
    color:blue;//定义元素前插入内容的样式
}
.clearfix::after{
    content:"";//清除浮动
    display:block;
    clear:both;
}
a:hover::before{//配合CSS定位及特效，生成更强大的特效
    content:'\5B';
    position:absolute;
    left:-20px;
}

3、border-radius
实现一个圆:

<style>
.circle-block{
    width:100px;
    height:100px;
    background-color:red;
    border-radius: 50px;
    -moz-border-radius:50px;
    -webkit-border-radius: 50px;    
}
</style>
<div class="circle-block"></div>

4、box-shadow:元素阴影
使用方法:

<style>
.shadow-block{
    width:100px;
    height:100px;
    background-color:red;
    box-shadow: 10px -10px 10px blue;
    -moz-box-shadow:50px;
    -webkit-box-shadow: 50px;    
}
</style>
<div class="shadow-block">
</div>

5、text-shadow:文本阴影
使用方法:

<style>
div{
    width:100%;
    height:100%;
    background-color:#666;
}
.shadow-block{
    color: #292929;
    font-size: 90px;
    font-family: helvetica;
    text-shadow: 2px -2px 10px blue;
    -moz-text-shadow:50px;
    -webkit-text-shadow: 50px;    
}
</style>
<div>
    <h1 class="shadow-block">hello world</h1>
</div>

6、transition
允许CSS的属性值在一定的时间内平滑的过渡。这种效果可以在鼠标单击、获得焦点、对元素属性做任何改变中触发
使用方法:transition: transition-property(执行变换的属性) ;transition-duration(变换持续的时间);transition-timing-function(变换的速率变化);transition-delay(变换延迟时间);

<style>
#shadow-block{
    width:100%;
    height:100%;
    background-color:#666;
    transition: background-color 2s;
    -moz-transition: background-color 2s;
    -webkit-transition: background-color 2s;
}
#shadow-content{
    color: red;
    font-size: 90px;
    font-family: helvetica;
    text-shadow: none;
    -moz-text-shadow:none;
    -webkit-text-shadow: none;    
    transition:text-shadow 2s;
    -moz-transition: text-shadow 2s;
    -webkit-transition: text-shadow 2s;
}
#shadow-content:hover{
    text-shadow: 8px -8px 10px blue;
    -moz-text-shadow:8px -8px 10px blue;
    -webkit-text-shadow: 8px -8px 10px blue; 
}
</style>
<div id="shadow-block">
    <a id="shadow-content">hello world</a>
</div>
<script src="./jquery.js"></script>
<script type="text/javascript">
document.getElementById('shadow-block').onclick=function(){
    $('#shadow-block').css('backgroundColor','#333');
}
</script>

7、transform
transform属性向元素应用2D或3D转换(旋转、缩放、移动、倾斜);
transform取值可为:none | matrix(n,n,n,n,n,n) | matrix3d(n,n,…) | translate(x,y) | translate3d(x,y,z) | translateX(x) | translateY(y) | translateZ(z) | scale(x,y) | scale3d(x,y,z) | scaleX(x) | scaleY(y) | scaleZ(z) | rotate(angle) | skew() | perspective(n)等
旋转:rotate()
缩放:scale()
倾斜:skew()
位移:translate()
使用方法如下:

<style>
#transform-block{
    width:200px;
    height:200px;
    border-radius:100px;
    background-color: blue;
}
#transform-content{
    width:130px;
    height:130px;
    background-color: red;
    transform:rotate(45deg);
    position: absolute;
    top: 43px;
    left: 43px;
}
#transform-content:hover{
    transform:rotate3d(1,0.5,1,180deg) scale(1.5,1.5);
}
</style>
<div id="transform-block">
    <div id="transform-content"></div>
</div>