边界圆看起来很模糊

本教程将介绍边界圆看起来很模糊的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

边界圆看起来很模糊 教程 第1张

问题描述

这个带边框的圆圈看起来很模糊。是否有可能修复它以及怎么修复它?

div {
  border-radius: 50%;
  border: 1px solid black;
  height: 22px;
  width: 22px;
  background-color: white;
}
<div></div>

推荐答案

使用带有透明边框的框阴影似乎也会使它在使用铬时不那么模糊。
在下面的示例中,第一个圆是原始圆,第二个圆是用长方体阴影制作的:

div {
  border-radius: 50%;
  border: 1px solid black;
  height: 22px;
  width: 22px;
  background-color: white;
  float:left;
}
div + div{
  width:20px;
  height:20px;
  border-color:transparent;
  box-shadow:0 0 0 1px #000;
  margin:1px 3px;
}
<div></div>
<div></div>

好了关于边界圆看起来很模糊的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。