css3标签整理

rain

兼容处理：css3的兼容性不是很好，一般要注意加上兼容处理：
-moz-      兼容老版本的  firefox 浏览器
-webkit-   safari 和  chrome
-o-           opera
-ms-    IE 9   个别情况下需要加
属性简介：
1、border-radius        边框变为圆角
例：border-radius:25px;border-radius:X/Y   水平半径/垂直半径
2、box-shadow          加阴影
例：box-shadow: 10px 10px 5px #888888;
水平偏移量、垂直偏移量、模糊半径、颜色值 四个值多了个spread扩展距离，inset收缩。双重阴影用逗号隔开。
3、border-image        用图片作为边框
例：border-image:url(border.png) 30 30 round;
4、text-shadow     文字加阴影
例：text-shadow: 5px 5px 5px #FF0000;
5、word-wrap     对超出框架的文字进行强制断行
例：word-wrap:break-word;对长单词进行拆分，并换行到下一行
6、transition     设置过渡效果
例：  transition: all 0.5s ease 0s;
7、animation     @keyframes   制作动画效果
例：animation:myfirst 5s linear 2s infinite alternate;
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
8、background-size   定义背景图片尺寸     
background-origin：content-box、padding-box 或 border-box      定义背景图片显示区域
background-clip         规定背景的绘制区域
background-image:url(bg_flower.gif),url(bg_flower_2.gif);     双背景

9、@font-face     把特殊字体传到服务器上调用
例：@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}

10、transform 2D转换   旋转
transform: rotate(30deg); 旋转          transform: rotateX(120deg);   rotateY   围绕x轴、y轴旋转  transform:translate(50px,100px);   位移  
transform: scale(2,4);  宽度和高度增加的倍数   transform:skew(10deg,10deg);  围绕x轴和y轴翻转的度数
transform:matrix(0.866,0.5,-0.5,0.866,0,0);    旋转30度

11、opacity   设置 div 元素的不透明级别：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

12、多列
column-count:3 ;               分隔的列数
column-gap:40px;            列之间的间隔
column-rule:3px outset #ff0000;           列之间分割线的样式

13、用户界面
resize:both;      可由用户调整元素尺寸
outline:2px solid red;    outline-offset:15px;    边框边缘之外绘制轮廓