制作带边框的特殊风格css网格

Question

快速提问，你如何在CSS中发挥这种效果？

这个想法是网格是用引导网格构建的。因此，当屏幕尺寸变小时，它们将首先变为2列，然后变为移动1。 因此，当有2列时，你只有中间线和底线。

这可能在CSS中吗？

＆＃13;

＆＃13;

	.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;
				

	}
		

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以使用box-shadow，而不用模糊它们并缩小尺寸：

根据您的需求调整的基本示例。 （然后增加偏移，在扩散半径的第四个值上将它们减去负值）

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请参阅：https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow

  

/ * offset-x | offset-y | blur-radius |传播半径|颜色* /

     

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和自定义边框定义。

var newvalueFonts = element.attr('id').val();

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