CSS3部分内容

5CSS3：

新特性
浏览器支持

5.1圆角边框与阴影

5.1.1圆角边框

border-radius属性
border-top-left-radius左上角
border-top-right-radius右上角
border-bottom-left-radius左下角
border-bottom-right-radius右下角
例如：border-top-left-radius:40px 20px左上角一个长比高为2：1的椭圆
border-radius：15px：左右都为圆角

5.1.2阴影

box-shadow属性
inset：水平偏移 垂直偏移 模糊距离 颜色；
inset：可选，内部阴影
outset：默认值，外部阴影

5.2文字与文本

5.2.1text-shadow属性

用来设置文本阴影
水平偏移 垂直偏移 阴影部分 颜色

<h1>
text-shadow:2px 2px 8px blue
</h1>

常用文字效果
文字描边：偏移距离设置为零 模糊范围根据字体大小来定
突起浮标：投影黑色，字体白色，模糊范围稍微大一点
word-wrap属性
允许长单词和URL强制强制逆行换行
属性值break-word，normal
@font-face规则
文件夹名通常为fonts

5.3 2D转换

transform属性

5.3.1rotate

旋转
transform:rotate(30px)
正值顺时针旋转
负值逆时针旋转

5.3.2scale

缩放
transform:sale(x,y)

5.4过渡与动画

5.4.1过渡

transition属性
作用：将元素的某个属性从“一个值”在指定时间内过渡到“另外一个值”
transition 属性名 持续时间 过渡方法
transition-property 属性名all 对哪个属性进行变换
transition-duration 持续时间（秒）
transition-timing-function 过渡使用的方法（函数）
linear：匀速
ease：慢快慢
ease-in：慢快
ease-out：快慢
ease-in-out：慢快慢

5.4.2动画

animation属性
animation简写
animation-name：引用@keyframes动画名称
animation-duration：动画完成时间
animation-timing-function：规定动画的速度曲线。默认是“ease”
animation-play-state：running|paused

5.5 3D变换

3D：transform-style:preserve-3d

5.5.1旋转：transform属性

rotateX()
rotateY()角度deg
rotateZ()
父容器：旋转
transform-style:preserve-3d;
transform:rotateY(60deg);
样例

.rotate_left{
    -webkit-transform: rotate(7deg);/*Safari and Chrome 内核为Webit/blink*/
    -ms-transform: rotate(7deg);/*IE9 内核为trident*/
    -moz-transform: rotate(7deg);/*Firefox 内核为Gecko*/
    -o-transform: rotate(7deg);/*Opera 内核为presto*/
    transform: rotate(7deg);
    }

旋转用"_"而不是用“-”

5.5.2透视：perspective属性

舞台：透视关系
perspective:100px;