css3基础点

文本属性：color,font，text-decoration，text-align，vertical-align，white-space，content 

CSS3属性（内核前缀）

Mozilla 内核   css前缀-moz; 

WebKit  内核   css前缀-webkit ;（谷歌已换用blink内核）

Opera   内核   css前缀 -o ;    （欧朋已换用blink内核）

Trident 内核   css前缀 -ms ; 

border-image  ：

stretch 拉伸方式来填充边框背景图  | 

repeat 平铺 图片碰到边界时超出截断 | 

round 平铺，图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框

background: transparent ; 等价  background:rgba(0,0,0,0);

color: transparent ; 等价  color:rgba(0,0,0,0);

 CSS3渐变   css3实现背景颜色线性渐变

div{ 
width:500px; 
border:1px solid #FA0; 
background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00);     /*横向渐变*/ 
background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*纵向渐变*/ 
-webkit-background-clip: text ; 
/*只有webkit内核支持text的剪切模式*/ 

color:transparent; 
}

 4. CSS3倒影   -webkit-box-reflect

     1.方向 -webkit-box-reflect:   below/above/left/right

     2.距离

     3.透明度

-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,

rgba(0,0,0,0.6) 100%)

旋转 ：-webkit-transform: rotate(120deg);

平移 ：-webkit-transform: translate(20px, 10px);  -moz-transform: translateX(20px);

缩放 ： -webkit-transform: scale(1.1,0.5); X方向缩放1.1倍，Y方向缩放0.5倍

backface-visibility: visible | hidden;   定义当元素不面向屏幕时是否可见。可用在扑克牌旋转上。