Question

我一直在尝试使用CSS为Foundation 6网站（流体）上的图像创建lifted corner effect，但无法使其正常运行。我总是一无所有。更改z-index属性不会执行任何操作。我认为基金会中的某些内容可能会造成干扰，但是我是Foundation的新手。

理想情况下，我希望有一个类可以应用于任何大小的图像。

CSS

.shadowbox {
  position: relative;
}
.shadowbox:before, .shadowbox:after {
  z-index: -1;
  position: absolute;
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.shadowbox:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

HTML：

<div class="medium-3 columns">
    <div class="feature-section-column" data-equalizer-watch>
        <div class="shadowbox">
            <img src="assets/img/feature_img/stem_design.jpg" />
        </div>
        <p>STEM learning is everywhere and we help design and advance it. Our work includes the comprehensive design of STEM schools and the transformation of existing ones, strategic planning support to school districts and networks, and the creation of STEM learning experiences that range from curriculum-embedded capstones to aligning in- and out-of-school learning in the community.</p>
        </div>
</div>

Answer 1

您遇到许多问题。首先，主列太大了，它会将：before和：after推出了页面。

我没有你的照片。但是文本可能也应该在.shadowbox中。

我们将需要稍微限制.shadowbox的大小，以便：after和：before（宽度为50％）可以容纳。我减小了宽度。

<div class="medium-3 columns">
    <div class="feature-section-column" data-equalizer-watch>
        <div class="shadowbox">


        <p>STEM learning is everywhere and we help design and advance it. Our work includes the comprehensive design of STEM schools and the transformation of existing ones, strategic planning support to school districts and networks, and the creation of STEM learning experiences that range from curriculum-embedded capstones to aligning in- and out-of-school learning in the community.</p>
        </div>
        </div>
</div>

从更简单的内容开始。

.shadowbox {
  position: relative;
  width:50%;
}
.shadowbox:before, .shadowbox:after {
  content:'';
  z-index: -1;
  position: absolute;
  bottom: 15px;
  left: 10px;
  width: 25%;
  top: 80%;
    box-shadow:0 20px 15px #777;
    transform:rotate(-5deg);
}
.shadowbox:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

https://jsfiddle.net/61atov8w/2/#&togetherjs=oyEsIjJwpM

Answer 2

伪元素:before和:after需要一个content属性才能呈现到屏幕上。

在content: '';内添加.shadowbox:before, .shadowbox:after { }，然后将其呈现。

在此处查看更多信息：Why do the :before and :after pseudo-elements require a 'content' property?

基础6中的CSS吊角

2 个答案: