css3新特性

文本阴影
动态效果
排版方式
圆角边框
阴影效果
旋转效果

浏览器

w3c制订标准慢，浏览器厂商快速加入新属性的支持，加前缀
w3c确定标准后，全面支持，去掉前缀

浏览器内核	浏览器	css3
Webkit	Safari Chrome	-webkit-
Gecko	Firefox	-moz-
Presto	Opera	-o-
Trident	IE	-ms-

圆角边框border-radius

border-top-left-radius 左上角的形状
border-top-right-radius 右上角的形状
border-bottom-left-radius 左下角的形状
border-bottom-right-radius 右下角的形状
取值
border-radius
水平值x
垂直值y
决定形状是什么如椭圆圆

例子
div{
    height:100px;
    width:150px;
    border:1px solid blue;
    border-top-left-radius:40px 20px; （水平40，垂直20）
    border-bottom-right-radius:20px;（水平垂直都20）
    }

例子
div{
    width:350px;
    height:50px;
    border:2px solid #a1a1a1;
    background:#ddd;
    border-radius:25px;
    }

bdrs扩展
-webkit-border-radius:|;
-moz-border-radius:|;
border-radius:|;
输入具体值就可以

阴影box-shadow

inset 水平偏移垂直偏移模糊距离颜色
inset 可选，内部阴影
outset 默认值，外部阴影

例子
div
 {
 width:300px;
 height:100px;
 background-color:#f90;
 box-shadow:10px 10px 5px #888;(水平垂直正数右下角偏移，5px是模糊范围，范围越大阴影越大）
 }

bxsh扩展
-webkit-box-shadow:inset hoff voff blur color;
-moz-box-shadow:inset hoff voff blur color;
box-shadow:inset hoff voff blur color;

文本与文字

text-shadow属性
word-wrap属性
@font-face规则

text-shadow属性

设置阴影: 水平偏移垂直偏移阴影大小颜色

例子阴影
h1{
   text-shadow:2px 2px #FF0000；
   } （省略阴影大小 文字大小相同）

h1{
   text-shadow:2px 2px 8px blue;
   }

文字描边

例子
h1{
   text-shadow:0 0 3px #f00;
   }

h1{
   color:white;
   text-shadow:2px 2px 4px #000;
   }

word-wrap属性

允许长单词、URL强制进行换行
normal
break-word
例子：对比前后代码为设置后



最长英文单词，pneumonoultramicroscopicsilicovolcanoconiosis

@font-face规则

web字体，放在服务器上，需要时下载使用
利用@font-face规则，定义web字体，并引用需要字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体

字体文件后缀	适用于浏览器
.TTF或.OTT	Firefox、Safari、Opera
.EOT	Internet Explorer 4.0+
.SVG	Chrome、IPhone
.WOFF	Chrome、Firefox

例子：基于已经下载好字体并放在fonts文件夹内

2D变换：transform属性

对元素进行旋转、缩放、移动、拉伸
transform属性
rotate（）
scale（）

transform:rotate( deg);

deg为单位正值顺时针负值逆时针旋转

例子
css
div{
    width:100px;
    height:75px;
    background-color:#ccc;
    border:1px solid black;
    }
#rotateDiv{
    transform:rotate(30deg);
    }
html

        web
        web

trsf扩展
#rotateDiv{
transform:rotate(30deg);
-ms-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-wedkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
}

缩放transform:scale()

transform:scale(x,y)
x:水平方向缩放的倍数
y:垂直方向缩放的倍数，若省略，同x
0-1，缩小；>1放大

过度与动画

过渡
transition属性

transition-property
transition-duration
transition-timing-function
transition-delay

动画

@keyframes规则
animation属性

过渡transition

将元素的某个属性从"一个值"
在指定的时间内过渡到"另一个值"
transition 属性名持续时间过渡方法
transition-property 属性名（若多个逗号隔开）|all 对哪个属性进行变化
transition-duration 持续时间
transition-timing-function 过渡使用的方法（函数）

transition-timing-function属性取值

值	描述
linear	匀速
ease	慢快慢
ease-in	慢快
ease-out	快慢
ease-in-out	慢快慢

例子 鼠标悬停 一秒内变化
css:
div{
  height:30px;
  width:100px;
  line-height:30px;
  border-radius:5px;
  color:#000;
  background-color:silver;
  transition:all 1s linear；
  }
div:hover{
  color:white;
  background-color:#45B823;
  }
html:
web design

animation动画

步骤
定义动画 @keyframes（关键帧）规则
调用动画 animation属性

例子需要套入html结构
css
@keyframes mycolor（动画名称）
 {
   0%   {background-color:red;}
   30%  {background-color:blue;}
   60%  {background-color:yellow;}
   100% {background-color:green;}
 }
 html
 div:hover
 {  
    animation:mycolor 5s linear;
 }

animation属性取值

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

把子属性写在animation属性
先写动画名字，时长，方式
animation-name
animation-duration
animation-timing-function

3D变换

3D
transform-style:preserve-3D
旋转
transform属性
rotateX()
rotateY()--------角度deg
rotateZ()
透视
perspective属性
既是透视关系值设置越大越不明显
使用时需设置
transform-style:preserve-3D
以及
perspective:100px(自行取值）

css3基础