### 1、CSS3圆角边框 border-radius：15px/30% ### 2、CSS3背景 background-size： 属性规定背景图片的尺寸 background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。 ### 3、CSS3文字效果 text-shadow:5px 5px 5px #FFFFFF; word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;} ### 4、CSS3 2D转换 transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。 * translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。 * rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。 * scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。 * skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度。 ### 5、CSS3 3D转换 * rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg); * rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg); ### 6、CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。 ### 7、css3动画 animation-name    动画名称 animation-duration   动画指定需要多少秒或毫秒完成 值：time      默认值为 0，意味着没有动画效果 animation-timing-function   设置动画如何完成一个周期 值：linear  匀速        ease   先慢后快，结束前变慢     默认        ease-in    低速开始        ease-out  低速结束        ease-in-out   低速开始和结束        cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值 animation-delay   动画在启动前的延迟间隔 值：time   默认值为 0 animation-iteration-count    动画的播放次数 值：n   一个数字，定义播放多少次动画     默认值1        infinite    动画无限次播放 animation-direction    是否轮流反向播放动画 值：normal         正常        reverse        反向播放        alternate      在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放        alternate-reverse   在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放 animation-fill-mode    当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态 值：none   默认，播放完动画后，画面停在起始位置       forwards     播放完动画，停在animation定义的最后一帧(保持最后一个属性值)        backwards   如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值        both   设置动画状态为动画结束或开始的状态（例如设置奇数播放为forwards状态，偶数播放为backwards状态） animation-play-state    动画是否正在运行或已暂停 值：paused   指定暂停动画        running   指定正在运行的动画，默认 initial    设置属性为其默认值 inherit   从父元素继承属性