.column{ position: relative; float: left; padding: 30px 0; 25%; z-index: 0; background-color: orange; text-align: center; } .button:before,.button:after{ content: ''; position: absolute; } .button:before{ top: -5px; bottom: -5px; left: -5px; right: -5px; z-index:-1; border-radius: 9px; } .button.red:before{ background: #d02e17; background-image: linear-gradient(to bottom, #b32511, #ffffff); } .button { display: inline-block; position: relative; height: 33px; line-height: 33px; background-image: linear-gradient(to bottom,#e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%); border: #000000 1px dotted; box-shadow: 0 2px 1px rgba(0,0,0,0.25); }
其中将.button:before 的z-index = -1;是因为.button 和.button的伪类(新加的一个Box)为同一级的,而.button 默认为0,修改其中的z-index其实修改的是子元素的z-Index,所以无论怎样修改,.button中的元素也会在伪类的下面,因此只能修改伪类的z-index; 而将.column的z-index设为0,其实是postion为relative时,设置z-index,才会将其加入context-stack,