盒子阴影,不以相同的方式覆盖周围的所有街区



我试图在CSS的帮助下平均覆盖所有块周围的阴影。我没有运气,因为由于某种原因,一条线(中间一行)与其他行相比并没有适当的尺寸对齐。如您所见,它更厚。我正在尝试2天找到解决方案,到目前为止没有运气。

.shadow1{
	box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
  		width:250px; 
			height:200px; 
			background-color: rgba(0,0,0, .2); 
			position:relative; 
}
.shadow2{
	box-shadow: inset -5px 0px 0px 5px rgba(255, 255, 255, 0.4);
  		width:250px; 
			height:200px; 
			background-color: rgba(0,0,0, .2); 
			position:relative; 
}
.shadow3{
	box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
  		width:250px; 
			height:200px; 
			background-color: rgba(0,0,0, .2); 
			position:relative; 
}
.shadow4{
	box-shadow: inset -5px 0px 0px 5px rgba(255, 255, 255, 0.4);
  		width:250px; 
			height:200px; 
			background-color: rgba(0,0,0, .2); 
			position:relative; 
}
<div class="shadow1"> </div>
<div class="shadow2"> </div>
<div class="shadow3"> </div>
<div class="shadow4"> </div>

我不知道您想要什么,但是我可以猜...这是您想要的吗?

.shadow1{
	box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
  	width:250px; 
	height:200px; 
	background-color: rgba(0,0,0, .2); 
	position:relative;
}
.shadow2{
	box-shadow: inset -5px 0px 0px 5px #ddd;
  	width:250px; 
	height:200px; 
	background-color: rgba(0,0,0, .2); 
	position:relative; 
    margin-top:-5px;
}
.shadow3{
	box-shadow: inset 0px 0px 0px 5px #ddd;
  	width:250px; 
	height:200px; 
	background-color: rgba(0,0,0, .2); 
    position:relative; 
    margin-top:-5px;
}
.shadow4{
	box-shadow: inset -5px 0px 0px 5px #ddd;
  	width:250px; 
	height:200px; 
	background-color: rgba(0,0,0, .2); 
	position:relative;
     margin-top:-5px;
}
<div class="shadow1"></div>
<div class="shadow2"></div>
<div class="shadow3"></div>
<div class="shadow4"></div>

相关内容

最新更新