CSS3新特性学习

1.一些实用规范：盒子模型，列表模块，超链接方式，语言模块，背景和边框，文字特效，多栏布局；

2：新增的选择器selctor

　　eg:

　　1） 子元素过滤伪类：div:first-child  (自动识别父元素，找父元素下的第一个div)  ：last-child  :nth-child(odd/even/)

　　2）

　　E:nth-last-child(n) 

　　E:nth-of-type(n) 

　　E:nth-last-of-type(n) 

　　E:last-child 

　　E:first-of-type 

　　E:only-child 

　　E:only-of-type

　　E:empty 

　　E:checked 

　　E:enabled 

　　E:disabled 

　　E::selection 

　　E:not(s) 

 3.文本

　　1)自动换行 word-wrap:break-work;

　　2)溢出隐藏方式 text-overflow:hidden/ellipsis   隐藏/省略点

　　

　　3)文字渲染 

　　　　Text-fill-color: 文字内部填充颜色

　　　　Text-stroke-color: 文字边界填充颜色

　　　　Text-stroke-width: 文字边界宽度

　　　　div{　　

　　　　　　-webkit-text-fill-color: black; 
　　　　　　-webkit-text-stroke-color: red; 
　　　　　　-webkit-text-stroke-width: 2.75px; 
　　
　　　　}

　　　　4)多列布局 column

　　　　　　.multi_column_style{ 

　　　　　　　　-webkit-column-count: 3; //分的列数

　　　　　　　　-webkit-column-rule: 1px solid #bbb; //列与列之间的间隔条样式

　　　　　　　　-webkit-column-gap: 2em; //列与列之间间} 

　　
6）颜色透明度
　　color：rgba(255,0,0,0.5)
7）倒圆角border-radius
8)颜色渐变
　　线性渐变，从左向右
　　background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E)); 
　　复杂颜色渐变 color-stop 拐点
　　background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));
　　径向渐变 radient
　　backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue)); 
9)元素，文字阴影

.class1{ 
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
} 
.class2{ 
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
} 

对于文字阴影：表示 X 轴方向阴影向右 5px,Y 轴方向阴影向下 2px， 而阴影模糊半径 6px，颜色为 rgba(64, 64, 64, 0.5)。其中偏移量可以为负值，负值则反方向。元素阴影也类似

　　10）反射

.classReflect{ 
-webkit-box-reflect: below 10px 
-webkit-gradient(linear, left top, left bottom, from(transparent), 
     to(rgba(255, 255, 255, 0.51))); 
}