Question

由于某种原因，添加到此div元素的我的框阴影怪异地显示在该元素下方。我在下面链接了我的源代码所在的codepen.io文件。我在使用UiKit滑块时遇到了麻烦，同时还在元素周围保留了方框阴影

<!DOCTYPE html>
<html>

<head>
  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- UIkit CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.21/css/uikit.min.css" />

  <!-- UIkit JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.21/js/uikit.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.21/js/uikit-icons.min.js"></script>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>

<body>
  <div class="uk-hidden@s uk-padding uk-padding-remove-vertical uk-slider" data-uk-slider="center: true; autoplay: true;">
    <div class="uk-position-relative">
      <div class="uk-slider-container">
        <ul class="uk-slider-items uk-child-width-1-1 uk-grid" style="transform: translateX(0px);">
          <li class="" style="order: 1;">
            <div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
              <div class="uk-card-media-top"><img class="" data-src="https://44u8552epjw3rivfs1yfikr1-wpengine.netdna-ssl.com/wp-content/uploads/2017/11/young-man-2939344_1280.jpg" alt="" data-uk-img="true" src="http://example-react-frontend-staging.herokuapp.com/3dffbae1ff8fe1724b31625be32c5810.jpg"
                  width="uk-width-1-1" height=""></div>
              <div class="uk-card-body undefined">
                <h3 class="uk-card-title">School</h3>
                <p>Fusce <a href="#">placerat</a> sem rutrum nisl gravida feugiat. Sed lacinia efficitur leo sed vestibulum. Maecenas scelerisque, nulla eget bibendum fermentum, velit ante consectetur ante, tempus egestas lacus urna quis mauris.</p>
              </div>
              <div class="uk-card-footer uk-text-center example-text-white example-background-accent-blue uk-text-uppercase example-letter-spacing-5-10">
                <div class="uk-flex uk-flex-middle uk-flex-center">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
              </div>
            </div>
          </li>
          <li class="" style="order: 1;">
            <div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
              <div class="uk-card-media-top"><img class="" data-src="https://edit.co.uk/uploads/2016/12/Image-2-Alternatives-to-stock-photography-Thinkstock.jpg" alt="" data-uk-img="true" src="http://example-react-frontend-staging.herokuapp.com/8d33aa933fda49caa52009cb16c128cd.jpg"
                  width="uk-width-1-1" height=""></div>
              <div class="uk-card-body undefined">
                <h3 class="uk-card-title">Hospital</h3>
                <p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="uk-card-footer uk-text-center example-text-white example-background-accent-blue uk-text-uppercase example-letter-spacing-5-10">
                <div class="uk-flex uk-flex-middle uk-flex-center">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
              </div>
            </div>
          </li>
          <li class="uk-active">
            <div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
              <div class="uk-card-media-top"><img class="" data-src="http://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg" alt="" data-uk-img="true" src="http://example-react-frontend-staging.herokuapp.com/bce5341a66f87afdb5120b52b0e6c0ab.jpeg" width="uk-width-1-1" height=""></div>
              <div
                class="uk-card-body undefined">
                <h3 class="uk-card-title">Community</h3>
                <p>Aliquam facilisis lectus nec ipsum finibus luctus. Praesent in <a href="#">facilisis</a> felis. Ut varius malesuada accumsan. Nullam consectetur <a href="#">rhoncus</a> metus eu rhoncus. Etiam lacinia pharetra urna, non volutpat ex suscipit
                  in. Nunc eu porta ex. </p>
            </div>
            <div class="uk-card-footer uk-text-center example-text-white example-background-accent-blue uk-text-uppercase example-letter-spacing-5-10">
              <div class="uk-flex uk-flex-middle uk-flex-center">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
            </div>
      </div>
      </li>
      </ul>
    </div><span class="uk-position-center-left-out example-text-black uk-icon" data-uk-slider-item="previous" data-uk-icon="icon: chevron-left; ratio: 2;"><svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span>
    <span
      class="uk-position-center-right-out example-text-black uk-icon" data-uk-slider-item="next" data-uk-icon="icon: chevron-right; ratio: 2;"><svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg></span>
  </div>
  </div>
</body>

</html>

https://codepen.io/kadenlnelson/pen/GwZENQ

Answer 1

我想我明白了，例如，您需要将框阴影类添加到按钮div中，而不是父div中，

<!-- Delete .uk-box-shadow-medium .uk-box-shadow-hover-large from here  -->
<div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">

并将其粘贴到此处，位于div按钮中

<div class="uk-flex uk-flex-middle uk-flex-center uk-box-shadow-medium uk-box-shadow-hover-large ">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>

可以解决问题的方法，请告诉我是否有帮助！

为什么框阴影像这样出现在元素下面

1 个答案: