<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>从前有座山</title> <style> .AA{width: 200px; /*长款*/ height: 200px; background-color: blue; /*背景颜色*/ border: 5px solid yellow; /*边框宽度 实线 颜色*/ margin: 50px 20px 50px 20px; /*外边界四周*/ font-size: 150px; /*字体大小*/ overflow: scroll;} /*超出部分出来下拉线*/ .BB{width: 200px; height: 200px; background-color: yellow; border: 5px solid black; margin: 50px 20px 50px 20px;} .BB:hover{cursor: pointer; /*特殊效果*/ font-size: 60px; border-radius: 50px; /*圆角效果*/ transition: 5s; /*渐变*/ text-shadow: 10px 10px 10px red; /*阴影效果*/ transform: skew(360deg,);} /*旋转*/ .CC{width: 200px;height: 200px; background-image: url(img/123.jpg); /*引入图片*/ margin: 50px 20px 50px 20px; border: 5px solid yellow} .CC:hover{cursor: pointer; transform:translateY(-300px); /*移动*/ transition: 3s;} </style> </head> <body> <div class="AA">从前有座山.</div> <div class="BB">山上有座庙.</div> <div class="CC"></div> </body></html>