css3常用属性整理 css3常用属性整理

CSS3新增了很多的属性
1.CSS3边框

border-radius：为盒子创建圆角边框。border-radius:3px 4px 5px 6px;
box-shadow：为盒子添加边框阴影。box-shadow:10px 10px 5px #888888;
border-image：使用图片为盒子添加边框。border-image：url(border.png) 30 30 round;

2.CSS3背景

background-size：规定背景图片的尺寸，可以使用像素或者百分比。 background-size:50% 50%; background-size:cover;
background-origin ：规定背景图片的定位区域,属性值有 content-box、padding-box 或 border-box. background-origin:border-box;
background-clip ：规定背景图片向外裁剪的区域。属性值有 content-box、padding-box 或 border-box. background-origin:padding-box;

3.CSS3文本效果

text-shadow：规定文本对象的阴影颜色。text-shadow:5px 5px 5px #ffffff;
writing-mode：规定文本对象的书写方式属性值有 horizontal-tb、 vertical-rl、vertical-lr; writing-mode:vertical-lr;
word-wrap :规定文本内容溢出盒子的边界。属性值有 normal、break-word；word-wrap:break-word;
*text-overflow:规定内联内容溢出盒子容器是否截断或者添加(...)及自定义字符。
属性值有 clip 溢出直接剪裁、ellipsis溢出部分用...替换。
通常配合white-space:nowrap使用。width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

4.CSS3 2D 变换

transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。属性值有 translate()、scale()、rotate()、skew()等。transform:skew(-5deg);
backface-visibility：指定元素背面面对用户时候是否可见。属性值有 visible、hidden；backface-visibility:visible;

5.CSS3 3D 过渡

transition:设置盒子的过渡。transition:background-color .5s ease-in;

6.CSS3动画

设置对象所应用的动画特效。

【css3常用属性整理】@-webkit-keyframes animations{
0%{-webkit-transform:translate(0); opacity:0; }
50%{-webkit-transform:translate(30px); opacity:1; }
70%{-webkit-transform:translate(35px); opacity:1; }
100%{-webkit-transform:translate(60px); opacity:0; }
}

8.CSS3多列布局