制作带有边框的特殊样式css网格

Question

快速的问题，你会如何在CSS中产生这样的效果？

​

​

这个想法是，网格是由一个引导网格构建的。因此，当屏幕尺寸变小时，它们将首先进入2列，而在移动1上。因此，当有2列时，只有中间线和底线。

这在css中是可能的吗？

​

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

	}

<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

您可以使用框影，而无需模糊它们和缩小它们的大小：

根据您的需要进行调整的基本示例。(然后增加偏移量，在扩展半径的第四个值上设置负值)

​

.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-x偏移-y，模糊-半径，半径，扩展-半径，颜色*/ 盒影:2PX2PX2PX1pxRGBA( 0，0，0，0.2)；

使用https://codepen.io/gc-nomade/pen/LLyJZO (5行)

​

Answer 2

它可以正常工作，但在代码中包括引导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>

​