Question

我正在为我的项目使用效果7，我从这里https://css-tricks.com/almanac/properties/b/box-shadow/

应用的唯一效果是effect7类中的一个。但是：before和：after没有显示。

.effect7 {
  position: relative;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset !important;
}

.effect7:before,
.effect7:after {
  content: "";
  position: absolute !important;
  z-index: -1 !important;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 10px !important;
  right: 10px !important;
  -moz-border-radius: 100px / 10px !important;
  border-radius: 100px / 10px !important;
}

.effect7:after {
  right: 10px !important;
  left: auto !important;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg) !important;
}

<div class="effect7">
... effect7 ...<br>
... effect7 ...<br>
... effect7 ...<br>
... effect7 ...<br>
... effect7 ...<br>
... effect7 ...<br>
</div>

放置阴影后，Box Shadow无法正常工作

0 个答案: