我正在使用网格系统来展示网站的团队部分,在网格系统中我有 8 个部分,每个部分都有指向其他页面的单独链接,这 8 个部分中的每个部分都有一个圆形图像,我想知道如何才能使链接仅符合圆形而不符合以前默认的方形:
注意:这不是完整的网格只有一个部分
//this makes the circle image
div.Circ{
margin: 20px auto;
border-radius: 50%;
width: 200px;
height: 200px;
}
<div class="container">
<div class="row">
<div class="six columns">
<a href="#2" id="myBtn"></a><div class="Circ"></div></a>
<div class="textUnderline">
<p>Mentors</p>
</div>
</div>
<div class="six columns">
<a href="#1" id="driveBtn"><div class="Circ">
<img src="Images/bigboi.png">
</div>
<div class="textUnderline">
<p>Drive Team</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="six columns">
<a href="#3" id="mechBtn"><div class="Circ"></div>
<div class="textUnderline">
<p>Mechanical Executives</p>
</div></a>
</div>
</div>
</div>
最佳答案
你需要添加overflow: hidden
到.Circ
div:
div.Circ{
margin: 20px auto;
border-radius: 50%;
width: 200px;
height: 200px;
overflow: hidden;
}
关于html - 在html中制作一个特定形状的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59106434/