标签：
CSS样式整理
很多功能为了实现兼容，需要加浏览器前缀
—— – 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; }
原网址：
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的网站：
能在线看到css3的效果以及属性对浏览器的兼容性
.com 这个主要是查看css3属性使用的兼容性，比较全的
稿源：勤快学QKXue.NET
扩展阅读：
http://qkxue.net/info/29685/css-3
http://qkxue.net/info/30109/css-3
http://qkxue.net/info/30056/css-3
http://qkxue.net/info/30099/css-3
http://qkxue.net/info/30042/CSS
标签：
原文地址：http://www.cnblogs.com/qkxue/p/5906255.html
