很多功能为了实现兼容，需要加浏览器前缀

—— – webkit - ， chrome

—— – moz - ，firefox

—— – ms - ，IE

—— – o - ，opera

css3选择器

属性选择器

E[attr]

E[attr=value]

E[attr^=value]首字母是value

E[attr$=value]尾部结束字符是value   aaa.doc

E[attr*=value]只要包含value

ul > li 表示后代

span + p 表示span后第一个p

span ~ p 表示span兄弟元素中所有p标签

结构伪类选择器

E：nth-of-type  是指父元素下E这个类型元素的第n个元素

E : nth-child 是指父元素下第n个元素且这个元素为E

E：only-of-type 是指父元素下只有E一个元素类型（但可能还有别的元素）

E ： only-child 是指父元素下只有E这一个元素

E：not(attr=value) 选择除了E中有attr属性的元素

E：empty 选择没有内容的E元素

状态伪类选择器

：focus 元素中有焦点时

：checked 元素被选中时

：first-letter 第一个字母 ：first-line 第一行

：enabled 能够输入值的元素

：disabled 禁用输入的元素

：read-only 选择只读的元素

css3文本属性

text-shadow ： 水平距离 垂直距离 模糊距离 颜色，…

火焰字效果

#fire{
text-align: center;
margin: 200px auto;
font-family: "Comic Sans MS";
font-size: 80px;
color: white;

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

}

body {background:black; }

原网址：http://www.html5tricks.com/demo/css3-flame-text-effect/index.html

text-stroke : w color

镂空字效果（须加前缀，只能在chrome下使用）

p { 
            font-size: 100px;
           color: transparent;
           -webkit-text-stroke: 2px red;
        
        }

 

 

@font-face {

font-family : 名字

src ： 嵌入字体地址

好处 ： 解决了系统字体缺失 带来的页面文字效果的差别（iconfont）

}

css3颜色透明度

opacity:0~1

rgba(0~255,0~255,0~255,0~1)

css3渐变

线性渐变

background : linear-gradient  （方向(角度) ， 颜色1， 颜色2， …）

1.第一个颜色后面百分比表示第一个到哪里结束，后面的颜色百分比表示的都是从哪里开始

2.方向可以写成角度，让渐变主轴变换

p { 
            width: 200px;
            height: 200px;
            background: linear-gradient(to top , blue 25%, yellow 50%, red 80%);
        
        }

径向渐变

background : radial-gradient( 方向( at 位置)， 颜色1， 颜色2，…)

p { 
    width: 200px;
    height: 200px;
    background: radial-gradient(to top , blue 25%, yellow 50%, red 80%);
 
}

最后分享两个有关css3的网站：

www.css3maker.com      能在线看到css3的效果以及属性对浏览器的兼容性

caniuse.com   这个主要是查看css3属性使用的兼容性，比较全的

css3整理（一）