今天用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>
===============以上是代码=================
效果图：
给父容器加个背景色，必须的
扫一扫
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
