CSS3 详解

一、CSS3新属性

1、边框
① border-radius
圆角边框 border-radius: 25px;
（参数越大，圆角越大）

②box-shadow
边框阴影：box-shadow: 10px 10px 10px #ccc inset/outset
参数值：x方向的偏移量 y方向的偏移量 模糊大小 颜色 内阴影(inset)/外阴影(outset)
注：四个参数时：默认外阴影

③border-image
边框图片：border-image: url() 27 round;
stretch 拉伸方式来填充边框背景图
repeat 平铺 图片碰到边界时超出截断
round 平铺 图片会根据边框的尺寸动态调整图片大小直至刚好铺满整个边框

2、背景
① background-size
规定背景图片的尺寸（四种参数格式）
contain：缩小图片来适应元素的尺寸（保持像素的长宽比）
cover：扩展图片来填满元素（保持像素的长宽比）
100px 100px：调整图片到指定大小
50% 100%：调整图片到包含元素的百分比大小

②多重背景图片
background-image:url(),url();
eg：background: url(‘img/han.jpg’) 0 0 no-repeat, url(‘img/newAct_01.jpg’) 200px 20px no-repeat;

3、文本效果
①text-shadow
可向文本应用阴影， 规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：（和box-shadow用法基本一致）
例子： text-shadow: 5px 5px 5px #FF0000;

②word-wrap
word-wrap: normal 正常换行
break-word 允许长单词换行到下一行

③text-overflow
text-overflow:ellipsis; 文本溢出隐藏换成点点点
clip 正常修剪文本：
string 使用给定的字符串来代表被修剪的文本。

4、渐变
①linear-gradient 线性渐变
background-image: linear-gradient(#e66465, #9198e5);(默认从上到下)
background-image: linear-gradient(to right, red , yellow); （加从左到右的方向）
80deg 角度

②radial-gradient 径向渐变
background-image: radial-gradient(#e66465, #9198e5);
background-image: radial-gradient( red 30% , yellow 70%);
默认是椭圆，可以改变形状 （circle， 颜色1， 颜色2…)

二、CSS3转换

1、2D转换
①translate() 移动
元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
transform: translate(x轴,y轴);
50px , 40px

②transform-origin
设置旋转元素的基点位置：(默认是中心点)
eg: transform-origin: 0 0；

③rotate() 旋转
元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
rotate(30deg); 顺时针旋转30度

④scale() 放大缩小
元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

2、3D转换
①rotate3d(x,y,z, angle) 3d旋转
rotateX(angle) 定义延x轴旋转
rotateY(angle) 定义延y轴旋转
rotateZ(angle) 定义延z轴旋转

②translate3d(x,y,z) 3个方向的移动
translateX(x) 用于x轴的移动
translateY(y) 用于y轴的移动
translateZ(z) 用于z轴的移动

③scale3d(x,y,z) 3d缩放转换
scaleX(x) 给定x轴缩放
scaleX(y) 给定y轴缩放
scaleX(z) 给定z轴缩放

④transform-style
使被转换的子元素保留其 3D 转换，
如何在 3D 空间中呈现被嵌套的元素。
transform-style: preserve-3d; 保留3D位置

三、CSS3过渡

1、过渡四个转换属性

① transition-property 应用过渡的 CSS 属性的名称。width
② transition-duration 定义过渡效果花费的时间 秒/毫秒
③ transition-timing-function 过渡效果的时间曲线;
linear/ease/ease-in/ease-out/ease-in-out
④ transition-delay 规定过渡效果何时开始

2、过渡

①它如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长

②transition:
属性 过渡时间 过渡效果 何时开始;
eg: transition: width 2s ease .2s

③过渡效果曲线：

linear 匀速
ease 慢-快-慢
ease-in 慢-正常
ease-out 正常-慢
ease-in-out 慢-正常-慢

四、CSS3动画

1、animation 动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

如需在 CSS3 中创建动画，需要配合 @keyframes 实现。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
注：@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。


把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。(也可以有多个状态0%-25%-50%-100%)
0% 是动画的开始，100% 是动画的完成。

2、animation 动画属性
注：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

animation: myfirst 5s linear 2s infinite（无限次播放） alternate（轮流反向播放）;

3、css3动画和过渡的差别
① transition不能自行触发，通过hover等动作或结合JS进行触发。
anmiation能够自行执行。

② transition可控性较弱。仅仅能指定起始状态和结束状态。而animation能够定义多个关键帧。

③ 动画在执行结束之后，须要回到初始状态

④ transition的作用，能够用一句话来概括，‘平滑’改变CSS样式