<!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>
