制作圆形时边框不平滑

Question

我添加了圆角按钮。圆形按钮会有点模糊。

＆＃13;

＆＃13;

.btn {
  border: 1px solid #4278ae;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 10px;
  border-radius: 100%;
}

＆＃13;

<a href="#" class="btn">Test</a>

＆＃13;

＆＃13;

＆＃13;

我希望看起来平坦而平滑。我怎样才能实现这一目标？

Answer 1

1px让我们的眼睛看不到。代码没有问题，但您可以使用2px使其看起来更好。

如您所知，像素就像这样，

因此我们认为曲线不是平滑/清晰。

.btn {
  border: 2px solid #4278ae;
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  margin: 10px;
  border-radius: 100%;
}

<a href="#" class="btn">Test</a>

Answer 2

使用Box-Shadow属性代替边框：

box-shadow: 0px 0px 3px 0px #4278ae;

取代

border: 1px solid #4278ae;

看起来更清楚