资料：http://www.runoob.com/css3/css3-tutorial.html
边框：
<!--圆角--> <!DOCTYPE html> <html> <style> div{ border:2px solid #a1a1a1; padding:10px 40px; background-color:#dddddd; width:300px; border-radius:25px; } </style> <body> <div>border-radius 属性允许你为元素添加圆角边框</div> </body> </html> <!--盒阴影--> <!DOCTYPE html> <html> <style> div{ height:100px; width:300px; background-color:yellow; box-shadow:10px 10px 5px #888888; } </style> <body> <div>border-radius 属性允许你为元素添加圆角边框</div> </body> </html> <!--边界图片--> <!DOCTYPE html> <html> <style> div{ border:15px solid transparent; width:250px; padding:10px 20px; } #round { border-image:url(image/border.png) 30 30 round; } #stretch { border-image:url(image/border.png) 30 30 stretch; } </style> <body> <div id="round">事实上是。。。。</div> <div id="stretch">事实上是。。。。</div> <img src="image/border.png"> </body> </html>
多个背景图片：
<!--多个背景图片--> <!DOCTYPE html> <html> <style> body{ background-image:url(image/1.jpg),url(image/2.jpg); } </style> <body> </body> </html>
渐变：
<!----> <!DOCTYPE html> <html> <style> #grad{ height:200px; background:linear-gradient(to bottom right,red,blue); } </style> <body> <div id="grad"></div> </body> </html>
2d转换：
<!----> <!DOCTYPE html> <html> <style> div.one { width:200px; height:100px; background-color:red; border:1px solid black; transform:skew(30deg,20deg); } </style> <body> <div class="one"></div> </body> </html>
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
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 轴。
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 转换元素的透视视图。
过渡：
<!DOCTYPE html> <html> <head> <style> img { width:100px; height:100px; transition:width 2s,height 2s,transform 2s; } img:hover { width:300px; height:200px; transform:rotate(180deg); } </style> </head> <body> <div> <img src="image/1.jpg" width="150" height="200"> </div> </body> </html>
动画：
<!--要创建CSS3动画，你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。--> <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; -webkit-animation:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear;<!--动画从头到尾的速度是相同的。--> -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite;<!--无限次播放--> -webkit-animation-direction:alternate; -webkit-animation-play-state:running; } @-webkit-keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html>
多列：
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <style> .newspaper { -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule:3px outset #ff00ff; } </style> </head> <body> <div class="newspaper"> “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。” </div> </body> </html>
图形界面：
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <style> .newspaper { border: 2px solid black; padding:5px 5px; width:500px; box-sizing:border-box; outline:2px solid red; outline-offset:15px; resize:both; overflow:auto; } </style> </head> <body> <div class="newspaper"> “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。” </div> </body> </html>