伪类(Pseudo-Class)能够在 CSS 中选择某些 HTML 元素的特定状态,例如当鼠标悬停在链接上或者当被点击时。其中,:after 伪类和 :before 伪类是最常见的两种伪类,在使用 CSS 制作图形时非常有用。
下面我们就来介绍如何使用 CSS 伪类来画一个圆形:
.circle { display: inline-block; width: 100px; height: 100px; border-radius: 50%; background-color: #ffcc00; position: relative; } .circle:before { content: ""; display: block; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 50%; background-color: #ffffff; }
上面的代码中,我们通过 .circle 类选择器来定义一个圆形,使用 border-radius: 50% 属性来设置圆角。同时,我们使用 :before 伪类来创建一个内圆,设置具体样式并将其嵌套在 .circle 中。
通过这种方式,我们就可以使用 CSS 来轻松地绘制一个圆形了!