边框移动 1px

Question

我注意到在页面加载后，第 2 项和第 3 项的边框向左移动了 1px。

我尝试在下面的代码片段中重现我的问题，但是它没有正确显示（在代码片段中一切都很好，所以肯定有其他问题）。我真的想避免发布我所有的代码。有没有人可以告诉我那个错误的可能因素是什么？

我在屏幕上附加了一个问题。有趣的是，如果输入页面源代码，问题就会自行纠正（边框移回原位）或者如果我将鼠标悬停在元素上。

.services .icon-box { text-align: center; /* border: 1px solid #ebebeb; */ padding: 23px 34px; transition: transform 0.3s ease-in-out 0s; /* border-radius: 10px 10px 10px 10px; */ } .ofertaRamkiTop{ box-shadow: 0px 4px 15px 0px rgb(65 132 234 / 75%); /* border-left: 1px solid rgba(65, 132, 234, 0.75); border-right: 1px solid rgba(65, 132, 234, 0.75); border-top: 1px solid rgba(65, 132, 234, 0.75); */ border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative; z-index: 6; } .ofertaRamkiBottom{ box-shadow: 0px 4px 15px 0px rgb(65 132 234 / 75%); border-left: 1px solid rgba(65, 132, 234, 0.75); border-right: 1px solid rgba(65, 132, 234, 0.75); border-bottom: 1px solid rgba(65, 132, 234, 0.75); /* border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; */ text-align: center; padding: 40px 20px; transition: transform 0.3s ease-in-out 0s; position: relative; z-index: 5; } .services .icon-box .icon { margin: 0 auto; width: 64px; height: 64px; background: #009ee3; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: 0.3s; } .services .icon-box .icon i { color: #151515; font-size: 28px; transition: ease-in-out 0.3s; } .services .icon-box h4 { font-weight: 700; margin-bottom: 15px; font-size: 24px; } .services .icon-box h4 a { color: #fff; transition: ease-in-out 0.3s; } .services .icon-box h4 a:hover { color: #FFC451; } .services .icon-box p { line-height: 24px; font-size: 14px; margin-bottom: 0; } /* .services .icon-box:hover { border-color: #fff; box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1); transform: translateY(-10px); } .ofertaRamkiBottom:hover{ transform: translateY(-10px); } */ .mainRamka{ transition: transform 0.3s ease-in-out 0s; } .mainRamka:hover, .ofertaRamkiBottom{ transform: translateY(-10px); } .ofertabgindy { position:relative; width:100%!important; height:100%!important; background-size: cover!important; background:url("https://h5p.org/sites/default/files/h5p/content/1209180/images/file-6113d5f8845dc.jpeg"); /* linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.6),rgba(0,0,0,0.6)),*/ } .ofertabgindy:after { width:100%!important; height:100%!important; background-size: cover!important; content: ''; opacity: 0; position:absolute; z-index:1; top: 0; left: 0; bottom: 0; right: 0; border-radius: inherit; transition: opacity .3s; background: url("https://h5p.org/sites/default/files/h5p/content/1209180/images/file-6113d5f8845dc.jpeg"); }

.ofertabggrupa {
  position:relative;
  width:100%!important;
  height:100%!important;
  background-size: cover!important;
  background: url('https://h5p.org/sites/default/files/h5p/content/1209180/images/file-6113d5f8845dc.jpeg');
}
.ofertabggrupa:after {
  width:100%!important;
  height:100%!important;
  background-size: cover!important;
  content: '';
  opacity: 0;
  position:absolute;
  z-index:1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
  transition: opacity .3s;
  box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%); 
  background:url('https://h5p.org/sites/default/files/h5p/content/1209180/images/file-6113d5f8845dc.jpeg');
}


.ofertabgrodzic {
  position:relative;
  width:100%!important;
  height:100%!important;
  background-size: cover!important;
  background: url('https://h5p.org/sites/default/files/h5p/content/1209180/images/file-6113d5f8845dc.jpeg');
}
.ofertabgrodzic:after {
  width:100%!important;
  height:100%!important;
  background-size: cover!important;
  content: '';
  opacity: 0;
  position:absolute;
  z-index:1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
  transition: opacity .3s;
  background:url('https://h5p.org/sites/default/files/h5p/content/1209180/images/file-6113d5f8845dc.jpeg');
  box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%); 
}

<html>
  <html>
  <head>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body> 
  <div class="container-fluid" style="margin:0!important;padding:0!important">
            <div class="container" style="padding-top:0">
              <div class="row" data-aos="zoom-in">               
                <div class="col-lg-4 col-md-6 align-items-stretch mainRamka">
                  <a onclick="ShowModal()" role="button" class="aoferta" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-label="Slide 1">
                    <div class="icon-box ofertabgindy ofertaRamkiTop"></div>
                    <div class="ofertaRamkiBottom">
                      <h4 class="hoferta">Lorem ipsum                      
                        
                      </h4>
                      <p class="pfff" style="margin-bottom:20px">Lorem ipsum Lorem ipsum Lorem ipsum.
                      </p>
                      <a onclick="ShowModal()" class="hoverEff" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-label="Slide 1">
                        <span style="font-size:.9rem;cursor: pointer;text-decoration: underline;">Lorem ipsum >></span></a>
                    </div>
                  </a>
                </div>
      
                <div class="col-lg-4 col-md-6 align-items-stretch mt-4 mt-md-0 mainRamka">
                  <a onclick="ShowModal()" role="button" class="aoferta" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2">
                  <div class="icon-box ofertabggrupa ofertaRamkiTop"></div>
                  <div class="ofertaRamkiBottom">
                    <h4 class="hoferta">Lorem ipsum
                      
                    </h4>
                    <p class="pfff" style="margin-bottom:20px">Lorem ipsum Lorem ipsum Lorem ipsum.
                    </p>
                    <a onclick="ShowModal()" class="hoverEff"  data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2">
                      <span style="font-size:.9rem;cursor: pointer;text-decoration: underline;">Lorem ipsum >></span></a>
                  </div>
                  </a>
                </div>
      
                <div class="col-lg-4 col-md-6 align-items-stretch mt-4 mt-lg-0 mainRamka">
                  <a onclick="ShowModal()" role="button" class="aoferta" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3">
                    <div class="icon-box ofertabgrodzic ofertaRamkiTop"></div>
                    <div class="ofertaRamkiBottom">
                      <h4 class="hoferta">Lorem ipsum
                      </h4>
                      <p class="pfff" style="margin-bottom:20px">Lorem ipsum Lorem ipsum Lorem ipsum.
                      </p>
                      <a onclick="ShowModal()" class="hoverEff" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3">
                        <span style="font-size:.9rem;cursor: pointer;text-decoration: underline;">Lorem ipsum >></span></a>
                    </div>  
                  </a>
                </div>
              </div>
            </div>
          </div>
  </body>
</html>

Ps。全屏打开代码段

Answer 1

尝试每次将大小减小 10%。这可能有帮助

边框移动 1px

Border moves by 1px

html

border

web-site-project