CSS縮放和變換在我的Chrome瀏覽器中顯示線條-有解無憂

<a>當用戶將滑鼠指向我的部分時，我想為我的部分創建漂亮的平滑放大效果。

它有效，但由于某種原因，我<div>在該<a>部分內的部分之間有線條。

這是我的例子：http : //jsfiddle.net/p1g0Lzu3/23/

所以，在懸停時，有兩條灰線，我不想在那里。

我嘗試了各種方法，但仍然找不到解決此問題的方法。

uj5u.com熱心網友回復：

最簡單的解決方法是為包裝器提供與內部 div 相同的背景顏色

.wrapper {
   background-color: #243964;
}

uj5u.com熱心網友回復：

有一些沒有設定高度的.main類將這些線放在那里。默認情況下使用靜態位置，它將嘗試填充任何未填充的空間。這是一個奇怪的概念，但我能夠通過添加以下內容來修復它：

 /* additions */
 .main {
   height: 80%;
 }

另外，我假設您將滾動條放在那里是有原因的，所以我根本沒有改變它。我添加了media queries只是為了片段查看的緣故。我建議點擊整頁

.container-box {
    transform: translateX(70%);
    display: flex;
    width: 40%;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 40px;
    padding-bottom: 40px;
}

.shadow-bottom {
    -webkit-box-shadow: 0 12px 0px 6px #6076a7;
    -moz-box-shadow: 0 12px 0px -6px #6076a7;
    box-shadow: 0 12px 0px -6px #6076a7;
}


.wrapper {
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
    display: flex;
    flex-flow: row wrap;
    flex: 100px;
    margin: 20px;
    text-align: center;
    
}
    .wrapper:hover {
         -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    }

    .wrapper > * {
        flex: 1 100%;
    }

.header {
    background: #243964;
    text-align: left;
    color: #dbd6d6;
    padding: 20px;
    font-size: 12px;
}

.hr1 {
    border: 0;
    border-top: 1px solid #4990e2;
}

.footer {
    background: #243964;
    text-align: left;
    color: white;
    padding: 20px;
    font-size: 14px;
}

.main {
    text-align: left;
    background: #243964;
    color: #fefefe;
    padding: 20px;
    padding-top: 35px;
    padding-bottom: 20px;
    height: 200px;
}
.box-title {
    font-weight: 600;
    font-size: 20px;
    padding-bottom: 10px;
    color: white;
}
.box-content {
    line-height: 1.9;
    font-size: 12px;
    color: #dbd6d6;
}
.box-paragraph {
    word-spacing: 4px;
}

.main .footer {
  height: fit-content;
  overflow: hidden;
}
 
 /* additions */
 .main {
   height: 80%;
 }
 
 @media only screen and (max-width: 1400px) {
  .container-box {
    width: 100%;
    height: 100%;
  }
  
  .header {
  height: 40px;
}
}

<div class="container-box">
    <a href="#" class="wrapper shadow-bottom">
        <header class="header">Header 0</header>
        <article class="main">
            <div class="box-title">Title 0</div>
            <p class="box-content">Some long text here hehehe jsdshsjhdshdsjhd</p>
        </article>
        <footer class="footer">
            <hr class="hr1">
            <div class="learn-more">
               Learn more
            </div>
        </footer>
    </a>

    <a href="#" class="wrapper shadow-bottom">
        <header class="header">Header 1</header>
        <article class="main">
            <div class="box-title">Title 1</div>
            <p class="box-content">sdsdsdsd</p>
        </article>
        <footer class="footer">
            <hr class="hr1">
            <div class="learn-more">
                Learn more
            </div>
        </footer>
    </a>
</div>

或者看看我的小提琴

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360124.html

標籤：html css

上一篇：如何使用css在禁用的輸入上定位GoogleChrome的webkit-datetime-edit-year-field？

下一篇：<hr>:after放置元素之前