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动画

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

@-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多列布局

• columns 设置或检索对象的列数和每列的宽度。复合属性值有 column-width 设置盒子每列的宽度、column-count 设置盒子的列数。columns:200px 4;

9.CSS3用户界面

• resize：设置盒子
• box-sizing：设置盒子模型组成的位置。属性值有 content-box、border-box、padding-box。box-sizing:border-box;

10.position新增了sticky

• 盒子元素在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中见到的吸附效果。position:sticky;