您的位置：首页 > 其它

before和after伪类学习

2017-04-13 11:25 148 查看

今天用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>

===============以上是代码=================

效果图：

给父容器加个背景色，必须的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航