今天用before和after伪类写了个阴影样式，用了半天时间。。（好菜）*^*,代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>InnerHtml</title> </head> <style> .ba{ width:500px; height:200px; text-align:center; line-height:150px; border:1px dashed red; background:#FFF; margin:50px auto; } .p{ position:relative; } .p::before,.p::after{ position:absolute; z-index:-1; content:""; width:200px; height:10px; background:#777; left:10px; max-width:200px; bottom:10px; box-shadow:0 10px 20px 0px; top:90%; transform:rotate(-3deg); } .p::after{ right:10px; left:auto; transform:rotate(3deg); } </style> <body> <div class = "ba p"><h1> before : after </h1></div> </body> </html>
===============以上是代码=================
效果图：
