css - 圆形按钮CSS

Question

我是一个初学者，非常困惑，当我给 border-radius: 50% 相同的宽度和高度时，作为 div 标签，它总是变成圆形。 但是使用标签 a 以防我想制作一个圆形按钮，它不会那样工作。这是我尝试使圆形边框按钮可点击的时候。

 
.btn {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 1px solid red;
}

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>
 

Answer 1

对于 div 标签，浏览器已经给定了默认属性 display:block。对于 anchor 标记，浏览器没有给出显示属性。您需要向其添加显示属性。这就是使用 display:block 或 display:inline-block 的原因。它会起作用。

.btn {
  display:block;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 1px solid red;
  
}

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>