Question

我遇到了样式表的问题。我必须在屏幕上创建两行名片。这是我的标记：

<table id="contact-grid">
          <tr>
              <td class="left-box">
                  <div class="card shadow">
                      <div class="bar left"></div>
                      <img src="/images/content/winter-lab/contact-us/test.jpg" />
                      <div class="bio">
                          <h4>
                              ...
                          </h4>
                          <p>Direct: ...</p>
                          <p>Fax: ...</p>
                          <p>...</p>
                      </div>
                  </div>


              </td>
              <td class="divider">
                  &nbsp;
              </td>
              <td class="center-box">
                  &nbsp;

              </td>
              <td class="divider">
                  &nbsp;
              </td>
              <td class="right-box">
                  <div class="card shadow">
                      <div class="bar left"></div>
                      <img src="/images/content/winter-lab/contact-us/test2.jpg" />
                      <div class="bio">
                          <h4>
                              ...
                          </h4>
                          <p>...</p>
                          <p>...</p>
                          <p>...</p>
                      </div>
                  </div>

              </td>
          </tr>
</table>

我删除了所有联系信息。这就是圆点所代表的。

这是怎么回事。我通过复制和粘贴在下面创建一个相同的行，然后更改联系信息。然后我应用以下CSS：

.shadow {
    position: relative;
}

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

.shadow:after
{
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 0;
    left: auto;
}

框阴影仅应用于第二行。但这就是奇怪的。如果我转置这两行，则第二行会显示方框阴影，而第二行则是第一行。如果我创建第三行，第三行也会获得框阴影。但不是第一排。简而言之，无论第一行是什么，它都不会得到一个盒子阴影。这里发生了什么？我认为问题是:before和:after假元素，但我不确定，因为其他一切都运行正常。任何人都有任何想法在这里发生了什么？

CSS：问题：之前和之后

0 个答案: