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;
