css3 新样式

1.css3新样式：
文字阴影 text-shadow
盒子阴影 box-shadow
圆角 border-radius
左上角 border-top-left-radius
右上角 border-top-right-radius
左下角 border-bottom-left-radius
右下角 border-bottom-right-radius
动画：
（1）变形：旋转 缩放 扭曲
transform: rotate(度数) scale(倍数) skew(度数)
(2) 过渡效果：样式(样式名/all) 持续时间(单位秒s)
transition:all 2s
（3）自定义动画
@keyframes 动画名{ from{样式} to{样式} }
@keyframes 动画名{ 0%{样式} … 100%{样式} }

      在选择器中使用animation:动画名 
                              持续时间(秒s) 
                              循环次数(数字/infinite) 
                              动画速率(匀速linear 匀加速ease 先加速后减速ease-in-out)

2.css3浏览器兼容性设置
谷歌，ie, sifa -ms-
火狐 -moz-
欧朋 -o-

通常一个css3样式设置4条语句，使其在各个浏览器兼容

3.css3选择器
（1）层次选择器
后代 空格
子元素 >
紧临的兄弟元素 +
后面的所有兄弟元素 ~
（2）新增伪类
:checked 适用于radio和CheckBox(选中时会触发)
:enabled 可用性(元素可用会触发)
:disabled 不可用性（元素设置了disabled=“disabled”）

   元素前或后增加内容
   :before 
   :after
     使用必须结合 content: "内容"
   
   序号伪类  
   :first-child第一个
   :last-child最后一个
   :nth-child(m)第m个 （下标从1开始）
   :nth-child(2n+1)奇数项
   :nth-child(2n)偶数项

（3）属性选择器
标签[属性名]：含有属性名的元素
标签[属性名=值]：含有属性名为指定值的元素
标签[属性名^=值]：含有属性名对应的值以开头元素
标签[属性名$=值]：含有属性名对应的值以结尾元素
标签[属性名*=值]：含有属性名对应的值含有指定值的元素
/含有属性名title/
ul>li[title]{
background: red;
}
/title值以a开头/
ul>li[title^=‘a’]{
color: yellow;
}

		/*title值以a结尾*/
		ul>li[title$='a']{
			color: blue;
		}
		/*title值含有tom*/
		ul>li[title*='tom']{
			font-size:40px;
		}