<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div:first-of-type{ width: 200px; height: 200px; background: #006400; /*使 div 元素看上去像一个按钮：*/ appearance: button; /*background-attachemnt: 背景定位*/ /*取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承*/ background-attachment: scroll; border: 10px black dashed; /*背景填充方法*/ background-clip: padding-box; /*阴影方法*/ /*内阴影 inset*/ box-shadow: 10px 10px 10px black inset; text-shadow: 10px 10px 10px red; /*偏移方法*/ /*旋转方法*/ transform: rotate(30deg); /*移动位置 左右 上下*/ transform: translate(100px,100px); /*规模效果*/ transform: scale(2); /*变形效果*/ transform:skew(20deg); /*变化持续时间*/ transition: 5s; } div{ width: 200px; height: 200px; background: linear-gradient(#f4f4f4,#000000); transition: 5s; /*行类块标签*/ display: inline-block; } div:hover{ transform: rotateX(45deg) translate(100px,100px) scale(2) skew(45deg); } </style> </head> <body> <div>道可道，非常道</div> <div>道可道，非常道</div> <div>道可道，非常道</div> </body></html>