<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>::before和::after</title>
????<style>
????????.effect{
????????????position:?relative;
????????????width:?50%;
????????????height:?30%;
????????????padding:?10%;
????????????margin:?0?auto;
????????????box-shadow:?0?1px?4px?rgba(0,0,0,0.3),0?0?40px?rgba(0,0,0,0.1)?inset;
????????????z-index:?0;
????????????text-align:?center;
????????}
????????.effect:after,.effect:before{
????????????position:?absolute;
????????????content:"";
????????????top:50%;
????????????bottom:?-1px;
????????????left:30px;
????????????right:?30px;
????????????box-shadow:?0?0?20px?rgba(0,0,0,0.8);
????????????border-radius:?40%/20%;
????????????z-index:?-2;
????????}
????</style>
</head>
<body>
????<div>
????????<h1>shadow?effect</h1>
????????::before和::after這兩個主要用來給元素的前面或后面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。
????</div>
</body>
</html>
2019-10-10
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>::before和::after</title>
????<style>
????????.effect{
????????????position:?relative;
????????????width:?50%;
????????????height:?30%;
????????????padding:?10%;
????????????margin:?0?auto;
????????????box-shadow:?0?1px?4px?rgba(0,0,0,0.3),0?0?40px?rgba(0,0,0,0.1)?inset;
????????????text-align:?center;
????????????background:?#fff;?/*?必須設置背景;?但不能有z-index?*/
????????}
????????.effect:after,.effect:before{
????????????position:?absolute;
????????????content:"";
????????????top:50%;
????????????bottom:?-1px;
????????????left:30px;
????????????right:?30px;
????????????box-shadow:?0?0?20px?rgba(0,0,0,0.8);
????????????border-radius:?40%/20%;
????????????z-index:?-2;
????????}
????</style>
</head>
<body>
????<div?class="effect">
????????<h1>shadow?effect</h1>
????????::before和::after這兩個主要用來給元素的前面或后面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。
????</div>
</body>
</html>
2016-11-25
因為你沒有給盒子設置背景顏色，相當于與背景透明，這樣就會看到它后面的盒子。你可以在effect中設置背景顏色，在.effect:after,.effect:before{}中設置背景顏色
2016-04-15
父級設置了relative，子元素設置了absolute，且均設置了z-index屬性值的時候，父級對子元素的層級有限制（即不論子元素z-index值大小，層級不“正?！憋@示）。如果將父級的層級設置為：z-index：auto，或者父級不設置z-index屬性，則子元素的z-index不受父級限制，即正常顯示。
2016-04-13
.effect{ ????????????position:?relative; ????????????/*z-index:?0;*/ ????????????box-shadow:?0?1px?4px?rgba(0,0,0,.3),0?0?50px?rgba(0,0,0,.1)?inset; ????????}注釋掉z-index:0;就有效果了。雖然不知道是為什么。