我尝试在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>
答案 0 :(得分:0)
我不太清楚你想要什么,但我可以猜到......这就是你想要的吗?
.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>