<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ 290px; height: 240px; margin: 30px; /*水平 垂直 阴影的模糊程度 颜色*/ box-shadow: 10px 10px 50px black; border-image:url("img/7.jpg") 50 50 round; } .one{ background: rgba(255,0,0, 1.0); } .two{ background: rgba(255,0,0, 0.8); } .three{ background: rgba(255,0,0, 0.6); } .four{ background: rgba(255,0,0, 0.4); } .five{ background: rgba(255,0,0, 0.2); } p{ 400px; height: 150px; font-size: 60px; color: red; text-shadow: 2px 2px 5px black; } span{ display: inline-block; 200px; height: 100px; background: red; } span:hover{ -webkit-transform-origin: bottom center; transform:scale(1.9); } </style> </head> <body> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> <div class="five">5</div> <p>殷婷婷</p> <span>12121</span> </body></html>