CSS Foundation 6 中的提升角

Question

我一直在尝试使用 CSS 为 Foundation 6 网站（流体）上的图像创建 lifted corner effect，但一直无法正常运行。我总是一无所获。更改 z-index 属性没有任何作用。我假设基础中的某些东西可能会干扰，但我是基础的新手。

理想情况下，我想要一个 class 我可以应用于任何大小的任何图像。

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 属性才能呈现到屏幕上。

在您的 .shadowbox:before, .shadowbox:after { } 中添加 content: ''; 然后它应该呈现。

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

CSS Foundation 6 中的提升角

CSS Lifted Corners in Foundation 6

html

css

zurb-foundation

zurb-foundation-6