<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .test{ width: 100px; height: 100px; background: #000; border-radius: 20px; /*圆角*/ /*box-shadow: x y z t c;*/ /*(x为阴影水平便宜量，y为垂直偏移量, z为阴影模糊程度，越大边缘越模糊， t为阴影的半径大小。 c为阴影的颜色)*/ } .text{ text-shadow:1px 1px 5px #666; /*text-shadow: X-Offset Y-Offset Blur Color*/ /*x为水平偏移量，y为垂直偏移量，B为阴影模糊程度，值越大越模糊。 C为阴影模糊颜色*/ } .Gradients{ width: 200px; height: 200px; /*background: linear-gradient(direction, color-stop1, color-stop2, ...);*/ /*线性渐变，第一个参数为方向，第二的参数和第三个参数为起始和结束的颜色*/ background: -webkit-linear-gradient(left,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(left,red, blue); /* 标准的语法 */ /*transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-40deg,0deg);// 旋转,缩放,定位,倾斜*/ /*scale(x,y) 缩放，x为x轴缩放，y为y轴缩放， 只指定一个为等比例缩放*/ /*translate(x ,y)*/ /*translate(x,y) 缩放，x为x轴变动，y为y轴变动， */ /*skew(x,y)*/ /*倾斜变幻。*/ } .Gradients:hover{ transform: rotate(40deg); transform-origin:left top;//改变基点位置，默认是center，center } </style> </head> <body> <div class="test"></div> <p class="text">啥地方接口的酸辣粉</p> <div class="Gradients"></div> </body> </html>
原文：http://www.cnblogs.com/joesbell/p/5912645.html