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边框。我无法获得边框效果

回答

相关问题