我在我的html页面上有这个布局:页面布局
这是一个带有复选框(隐藏)的表格,标签的样式看起来像按钮(白色边框和透明背景,显示下面的梯度)。梯度部分是容器。
现在我想实现的是仅在按钮下方显示梯度背景,以便按钮之间的零件保持白色。
请参见此处的示例:示例(并崇拜我的Photoshop技能)
我试图找出一个解决方案,但我一无所获。如果你们中的一些人可以帮助我,我真的很感激:)
预先感谢您!
- 创建多个没有
background
和大box-shadow
值的小圆形框。 - 这些盒子上的多余阴影将由
overflow: hidden
夹在各自的父母上。 - 在最外层的父母上应用梯度背景。
这是一个工作演示:
*,
*:before,
*:after {box-sizing: border-box;}
body {
background: linear-gradient(orange, yellow) no-repeat;
margin: 0;
}
.list {
justify-content: center;
list-style: none;
flex-wrap: wrap;
display: flex;
padding: 0;
margin: 0;
}
.list li {
justify-content: center;
padding: 30px;
overflow: hidden;
display: flex;
flex-grow: 1;
flex-basis: 50%;
}
.list .box {
box-shadow: 0 0 0 1000px #fff;
justify-content: center;
align-items: center;
border-radius: 100%;
display: flex;
height: 120px;
width: 120px;
}
<ul class="list">
<li>
<div class="box">Immobilier</div>
</li>
<li>
<div class="box">Travaux</div>
</li>
<li>
<div class="box">Finance</div>
</li>
<li>
<div class="box">Evenementiel</div>
</li>
<li>
<div class="box">Juridique</div>
</li>
<li>
<div class="box">Communication</div>
</li>
<li>
<div class="box">Recrutement</div>
</li>
</ul>