Почему box-shadow появляется ниже элемента, вот так - PullRequest
Новая
       25

Почему box-shadow появляется ниже элемента, вот так

0 голосов
/ 10 ноября 2018

enter image description here

Моя тень от ящика, добавленная к этому элементу 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

1 Ответ

0 голосов
/ 10 ноября 2018

Мне кажется, я понял, вам нужно добавить классы теней для блоков в кнопку 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>

это должно сработать, дайте мне знать, если это поможет вам!

...