CSS3有一些是与旧版CSS2.1重叠的，有一些是没有浏览器支持的，全学没必要，下面只记录一下有用的。
一、CSS3边框
1、圆角border-radius
border-radius:值越大，角越圆；
div { width:100px; height:100px; background-color:red; border-radius:10px; border-top-left-radius:20px; }
- border-top-left-radius:2em;
- border-top-right-radius:2em;
- border-bottom-right-radius:2em;
- border-bottom-left-radius:2em;
也可以根据上面4个参数，单独设置某个角。
2、阴影box-shadow
div { width:100px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #d8d8d8; }
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:水平向右偏移量；
v-shadow:垂直向下偏移量；
blur:模糊距离；
spread:阴影尺寸；
color:阴影颜色；
inset:改为内阴影；
3、边框图片 border-image
- border-image-source 用在边框的图片的路径。
- border-image-slice 图片边框向内偏移。
- border-image-width 图片边框的宽度。
- border-image-outset 边框图像区域超出边框的量。
- border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
二、CSS3 背景
1、background-size:控制背景图片的大小；
background-size:20px 20px;
2、background-origin:3个属性可选；
- padding-box 背景图像相对于内边距框来定位。
- border-box 背景图像相对于边框盒来定位。
- content-box 背景图像相对于内容框来定位。
3、background-clip：规定背景的绘制区域。
- padding-box 背景图像相对于内边距框来定位。
- border-box 背景图像相对于边框盒来定位。
- content-box 背景图像相对于内容框来定位。
另外在CSS3中，background-image:可以设置多张图片了。
background-image:url(1.gif),url(2.gif);
三、过渡transition
- transition:简写属性，用于在一个属性中设置四个过渡属性。
- transition-property:规定应用过渡的 CSS 属性的名称。
- transition-duration:定义过渡效果花费的时间。默认是 0。
- transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。
- transition-delay:规定过渡效果何时开始。默认是 0。
其中transition-timing-function过渡时间，有以下几种，你可以规定它过渡的速度。
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
<!DOCTYPE html> <html> <head> <style> div { width:200px; height:200px; background-color:#d8d8d8; } div:hover { width:300px; transition: width 2s; } </style> </head> <body> <div></div> </body> </html>
鼠标移上3D转换360度。
div:hover { transform: rotateY(360deg); transition: transform 2s; }
四、CSS动画
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background-color:#d5d5d5; color:white; animation:myfirst 5s; } @keyframes myfirst { from {margin-left:20px;} to {margin-left:520px;transform: rotateY(360deg);} } </style> </head> <body> <div> 飞啊飞 </div> </body> </html>
以上是改变位置，并且一边移动一边旋转的动画。
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background-color:#d5d5d5; color:white; animation:myfirst 5s infinite; } @keyframes myfirst { 0% {margin-left:20px;} 25% {margin-left:520px;transform: rotateY(360deg);} 50% {margin-top:120px;transform: rotateX(180deg);} 75% {margin-left:320px;transform: rotateY(360deg);} 100% {margin-top:0px;transform: rotateX(180deg);} } </style> </head> <body> <div> 飞啊飞 </div> </body> </html>
属性自己去查吧。太多。
- @keyframes 规定动画。
- animation 所有动画属性的简写属性，除了 animation-play-state 属性。
- animation-name 规定 @keyframes 动画的名称。
- animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
- animation-timing-function 规定动画的速度曲线。默认是 "ease"。
- animation-delay 规定动画何时开始。默认是 0。
- animation-iteration-count 规定动画被播放的次数。默认是 1。
- animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
- animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
- animation-fill-mode 规定对象动画时间之外的状态。
五、其他
- resize:设置用户可以通过拖拉改变元素尺寸；
- opacity:透明度；IE8旧的浏览器是这个filter:Alpha(opacity=50);
- max-height：设置元素的最大高度。
- max-width：设置元素的最大宽度。
- min-height：设置元素的最小高度。
- min-width：设置元素的最小宽度。
- transform 向元素应用 2D 或 3D 转换。
- transform-origin 允许你改变被转换元素的位置。
- transform-style 规定被嵌套元素如何在 3D 空间中显示。
- perspective 规定 3D 元素的透视效果。
- perspective-origin 规定 3D 元素的底部位置。
- backface-visibility 定义元素在不面对屏幕时是否可见。
- outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
六、2D转换
- matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵；
- transform-origin:围绕着旋转的原点，可用X、Y百分比；
- translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素；
- ----translateX(n) 定义 2D 转换，沿着 X 轴移动元素；
- ----translateY(n) 定义 2D 转换，沿着 Y 轴移动元素；
- scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度；
- ----scaleX(n) 定义 2D 缩放转换，改变元素的宽度；
- ----scaleY(n) 定义 2D 缩放转换，改变元素的高度；
- rotate(angle) 定义 2D 旋转的角度(负数逆时针)；
- skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴；
- ----skewX(angle) 定义 2D 倾斜转换，沿着 X 轴；
- ----skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴；
<!DOCTYPE html> <html> <head> <style> div { width:300px; height:240px; line-height:28px; border:2px solid #dcdcdc; transform: rotate(30deg); } </style> </head> <body> <div> <img style="300px; height:200px;" src="http://files.cnblogs.com/files/kissdodog/fengjing.gif" /> <span style="padding-left:20px;">美丽的花海</span> </div> </body> </html>
七、3D转换
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵；
- translate3d(x,y,z) 定义 3D 转化；
- translateX(x) 定义 3D 转化，仅使用用于 X 轴的值；
- translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值；
- translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值；
- scale3d(x,y,z) 定义 3D 缩放转换；
- scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值；
- scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值；
- scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值；
- rotate3d(x,y,z,angle) 定义 3D 旋转；
- rotateX(angle) 定义沿 X 轴的 3D 旋转；
- rotateY(angle) 定义沿 Y 轴的 3D 旋转；
- rotateZ(angle) 定义沿 Z 轴的 3D 旋转；
- perspective(n) 定义 3D 转换元素的透视视图；
3D可以想象一个立体坐标系在屏幕上，X向右，Y向里，Z向上。
<!DOCTYPE html> <html> <head> <style> div { width:300px; height:240px; line-height:28px; border:2px solid #dcdcdc; transform:rotateX(180deg); } </style> </head> <body> <div> <img style="300px; height:200px;" src="http://files.cnblogs.com/files/kissdodog/fengjing.gif" /> <span style="padding-left:20px;">美丽的花海</span> </div> </body> </html>