製作一個特殊的邊框樣式的CSS網格

Question

快速的問題，你會如何繞過在CSS中產生這種效果？

的想法是，電網是建立一個引導電網。所以當屏幕尺寸變小時，他們會先移動到2列，然後移動1. 因此，當有2列時，您只有中線和底線。

這可能在CSS？

\t .icon-grid{ 
 
\t \t \t -webkit-filter: drop-shadow(10px 8px 30px #222); 
 
    \t \t \t \t filter: drop-shadow(1px 8px 10px #222); 
 
\t \t \t 
 
\t \t \t \t padding: 75px; 
 
\t \t \t \t border-right: black 2px solid; 
 
\t \t \t \t border-bottom: black 2px solid; 
 
\t \t \t \t 
 

 
\t } 
 
\t \t

<div style="color: black" class="row"> 
 
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 
 

 
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 
 
    
 
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 
 
    
 
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 
 
     
 
    
 
</div>

Answer 1

你可以使用箱陰影，沒有他們bluring和瘦身他們：

基本的例子來調整您的需求。 （偏移增加然後，對擴散半徑的第四值負值dowsize它們）

.icon-grid { 
 
    box-shadow: 5px 0 0 -3px gray, 0 5px 0 -3px gray; 
 
    padding: 75px; 
 
} 
 
:nth-child(4) .icon-grid { 
 
    box-shadow: 0 5px 0 -3px gray; 
 
} 
 

 
/* demo purpose */ 
 
.row { 
 
    width: 1080px; 
 
    margin: auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div style="color: black" class="row"> 
 
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 
 

 
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 
 
    
 
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 
 
    
 
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 
 
     
 
    
 
</div>

---

見：https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow

/*偏移-X | offset-y |模糊半徑|傳播半徑| color */

box-shadow：2px 2px 2px 1px rgba（0，0，0，0.2）;

---

Codepen與https://codepen.io/gc-nomade/pen/LLyJZO（5行）打

Answer 2

其工作正常，但包括bootstrep CSS和在你的代碼的js ..

<div style="color: black" class="row"> 
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 

    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 

    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 

    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div> 


</div> 

Answer 3

使用Flexbox的和自定義邊框定義通過僞類。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    padding: 1em; 
 
    width: 25%; 
 
    position: relative; 
 
} 
 

 
li:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 50%; 
 
    left: 25%; 
 
    height: 2px; 
 
    background-color: #ccc; 
 
} 
 

 
li:before { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    height: 50%; 
 
    top: 25%; 
 
    width: 2px; 
 
    background-color: #ccc; 
 
}

<ul> 
 
    <li><img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></li> 
 
    <li><img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></li> 
 
    <li><img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></li> 
 
    <li><img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></li> 
 
    <li><img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></li> 
 
    <li><img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></li> 
 
    <li><img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></li> 
 
    <li><img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></li> 
 
</ul>