罫線付きの特別なスタイルのCSSグリッドを作成する

Question

クイック・質問、どうやってこのようなCSSの効果を作り出すのですか？

アイデアは、グリッドは、ブートストラップグリッドを構築するということです。したがって、画面サイズが小さくなると、最初に2つの列とモバイル1に移動します。 したがって、2つの列がある場合、Uは中線と下線のみを持ちます。

これは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し、それらを小型化することなく、ボックスシャドウを使用することができます。 （増加次いでオフセット、拡散半径の第4の値に負の値とそれらを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 |オフセット-y |ぼかし半径|広がり半径|色*/

ボックスシャドウ：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

疑似クラスを介した定義。

* { 
 
    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>