<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style> html,body{???????????? height:100%;???????????? height:100%; } .wrap{???????????? position:relative;???????????? width:300px;???????????? height:300px;???????????? background:#fff;???????????? box-shadow:0px 0px 4px rgba(0,0,0,0.3),???????????? ? ? ? ? ? ? ? ? ? ? 0px 0px 40px rgba(0,0,0,0.1) inset ;????????????left:50%;???????????? top:50%;???????????? font-size:30px;???????????? line-height:300px;???????????? text-align:center;???????????? transform:translate(-50%,-50%); } .wrap::before,.wrap::after{???????????? content:"" ;???????????? position:absolute;???????????? z-index:-1; ? ? ? ? /* 問題：這里給長方形陰影設置了z-index:-1屬性，為什么它會顯示在正方形陰影的上方,文字的下方？而不是顯示在正方形陰影的下方呢？我想讓這個長方形陰影顯示在最下方的，哪里出了問題?。?/???????????? box-shadow:0 0 ?20px rgba(0,0,0,0.8);???????????? top:50%;???????????? bottom:0;???????????? left:10px;???????????? right:10px;???????????? border-radius:100px/10px; } </style></head><body><div class="wrap">Hello World!</div></body></html>
z-index：-1怎么沒用？
Candy3610866
2016-08-12 15:17:54
