CSS網格 - 1px邊框。我無法獲得邊框效果

-1

我創建了一個帶有圖像的網格，就像我在項目中使用了flexbox一樣。CSS網格 - 1px邊框。我無法獲得邊框效果

.container { 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
    max-width: 1156px; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.box { 
 
    box-sizing: border-box; 
 
    border: 1px solid #000; 
 
/* padding: 10px; */ 
 
    margin-right: -1px; 
 
    margin-bottom: -1px; 
 
    position: relative; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    margin: 10px; 
 
} 
 

 
.cell img { 
 
    display: block; 
 
} 
 

 
@media only screen and (min-width: 768px) { 
 
    
 
    .container { 
 
    flex-direction: row; 
 
    } 
 
    
 
/* .box { 
 
    width: 50%; 
 
    } */ 
 
    
 
} 
 

 
@media only screen and (min-width: 1024px) { 
 
    .box { 
 
    width: calc(100%/4); 
 
    } 
 
    
 
}

<div class="container"> 
 
    <div class="box"> 
 
    <div class="cell"> 
 
     <img src="http://placehold.it/270x270"> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="cell"> 
 
     <img src="http://placehold.it/270x270"> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="cell"> 
 
     <img src="http://placehold.it/270x270"> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="cell"> 
 
     <img src="http://placehold.it/270x270"> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="cell"> 
 
     <img src="http://placehold.it/270x270"> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="cell"> 
 
     <img src="http://placehold.it/270x270"> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="cell"> 
 
     <img src="http://placehold.it/270x270"> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="cell"> 
 
     <img src="http://placehold.it/270x270"> 
 
    </div> 
 
    </div> 
 
<div>

在創建網格我不得不使用負利潤率右側和底部。

但是我有一個問題，大意是：懸停在與透明度圖像和邊框顏色疊加。（：網格顯示）

我也使用CSS網格佈局製成的網格。

.container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 

 
.grid { 
 
\t display: grid; 
 
\t grid-row-gap: 1px; 
 
\t background-color: #000; 
 
\t border: 1px solid #000; 
 
\t grid-gap: 1px; 
 
\t justify-self: center; 
 
\t max-width: 290px; 
 
\t height: auto; 
 
\t margin: 0 auto; 
 
} 
 

 
.grid > div { 
 
\t border: 10px solid #fff; 
 
} 
 

 
@media only screen and (min-width: 768px) { 
 
\t .grid { 
 
\t \t grid-template-columns: repeat(2, 1fr); 
 
\t \t grid-template-rows: repeat(4, 1fr); 
 
\t \t max-width: 581px; 
 
\t } 
 
} 
 

 
@media only screen and (min-width: 1024px) { 
 
\t 
 
\t .grid { 
 
\t \t grid-template-columns: repeat(4, 1fr); 
 
\t \t grid-template-rows: repeat(2, 1fr); 
 
\t \t max-width: 1163px; 
 
\t } 
 
}

<div class="container"> 
 
    <div class="grid"> 
 
    <div><img src="http://placehold.it/270x270"></div> 
 
    <div><img src="http://placehold.it/270x270"></div> 
 
    <div><img src="http://placehold.it/270x270"></div> 
 
    <div><img src="http://placehold.it/270x270"></div> 
 
    <div><img src="http://placehold.it/270x270"></div> 
 
    <div><img src="http://placehold.it/270x270"></div> 
 
    <div><img src="http://placehold.it/270x270"></div> 
 
    <div><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
</div>

請幫助我怎樣才能得到這些效果。

謝謝。

來源

2017-06-25 Mary Pieroszkiewicz

當有人把自己的自由業餘時間幫您排憂解難，在我的書，你在一個或其他方式表示感謝，因爲你卻反其道而行之，並張貼完成同樣的解決方案後，我現在決定刪除我的答案。我希望下一次你真的需要別人幫助你。 – LGSon

-1

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
*:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 

 
container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 

 
.grid { 
 
\t display: grid; 
 
\t background-color: #000; 
 
\t border: 1px solid #000; 
 
\t grid-gap: 1px; 
 
\t justify-self: center; 
 
\t max-width: 282px; 
 
\t height: auto; 
 
\t margin: 0 auto; 
 
} 
 

 
.box { 
 
    position: relative; 
 
} 
 

 
.cell::before { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    border: 10px solid #fff; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
} 
 

 
.box:hover::after { 
 
    content: "+"; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    color: white; 
 
    font-size: 60px; 
 
    font-weight: bold; 
 
} 
 

 

 
.box:hover .cell::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    left: -1px; 
 
    right: -1px; 
 
    bottom: -1px; 
 
    top: -1px; 
 
} 
 

 
.cell { 
 
    position: relative; 
 
    pointer-events: none; 
 
} 
 

 
.box:hover { 
 
    background-color: red; 
 
} 
 

 
.box:hover .cell::before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(255,0,0,0.5); 
 
} 
 

 
@media only screen and (min-width: 768px) { 
 
\t .grid { 
 
\t \t grid-template-columns: repeat(2, 1fr); 
 
\t \t grid-template-rows: repeat(4, 1fr); 
 
\t \t max-width: 563px; 
 
\t } 
 
} 
 

 
@media only screen and (min-width: 1024px) { 
 
\t 
 
\t .grid { 
 
\t \t grid-template-columns: repeat(4, 1fr); 
 
\t \t grid-template-rows: repeat(2, 1fr); 
 
\t \t max-width: 1124px; 
 
\t } 
 
}

<div class="container"> 
 
    <div class="grid"> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    </div> 
 
</div>

我已成功使用顯示獲得這樣的效果：電網

真厲害！ :)

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
*:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 

 
container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 

 
.grid { 
 
\t display: grid; 
 
\t background-color: #000; 
 
\t border: 1px solid #000; 
 
\t grid-gap: 1px; 
 
\t justify-self: center; 
 
\t max-width: 282px; 
 
\t height: auto; 
 
\t margin: 0 auto; 
 
} 
 

 
.cell { 
 
    position: relative; 
 
} 
 

 
.cell::before { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    border: 10px solid #fff; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
} 
 

 
.box { 
 
    position: relative; 
 
} 
 

 
.box:hover .cell::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    left: -1px; 
 
    right: -1px; 
 
    bottom: -1px; 
 
    top: -1px; 
 
} 
 

 
.cell:hover { 
 
    background-color: red; 
 
} 
 

 
.cell:hover::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(255,0,0,0.5); 
 
} 
 

 
@media only screen and (min-width: 768px) { 
 
\t .grid { 
 
\t \t grid-template-columns: repeat(2, 1fr); 
 
\t \t grid-template-rows: repeat(4, 1fr); 
 
\t \t max-width: 563px; 
 
\t } 
 
} 
 

 
@media only screen and (min-width: 1024px) { 
 
\t 
 
\t .grid { 
 
\t \t grid-template-columns: repeat(4, 1fr); 
 
\t \t grid-template-rows: repeat(2, 1fr); 
 
\t \t max-width: 1124px; 
 
\t } 
 
}

<div class="container"> 
 
    <div class="grid"> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="cell"><img src="http://placehold.it/270x270"></div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-25 13:58:22

@LGSon \t \t \t 感謝您的幫助，但是您的代碼有很大的錯誤，請看！我首先與網格做比你！ –

@LGSon不能！你有2px的邊界！ ;）我需要這個項目的1px邊框 –

@LGSon你開始不是我，你感到生氣...告訴我爲什麼你標誌我的答案！首先問問你自己。我首先從網格開始比你...，我真的不喜歡你想要改進的東西。我真的認同你的幫助。 –

CSS網格 - 1px邊框。我無法獲得邊框效果

回答

相關問題