基础 CSS 关闭按钮介绍

关闭按钮是用户界面中常见的元素之一。在开发网站或应用程序时，我们需要使用关闭按钮来关闭模态框、弹出窗口等。

本文将介绍如何使用基础 CSS 创建一个简单的关闭按钮，该按钮可以自适应浏览器大小，并且可以通过 CSS 样式修改。

HTML 代码

我们先来看一下 HTML 代码：

<a href="#" class="close-button">&times;</a>

在这个代码中，我们创建了一个 a 标签，href 属性设置为 #，这样点击时不会跳转到其他链接。class 属性设置为 close-button，这是我们用来添加 CSS 样式的类名。

关闭按钮使用了特殊字符 ×，也可以使用其他符号，例如 x。

CSS 代码

现在，我们来添加 CSS 样式：

.close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 1.5rem;
  text-decoration: none;
  color: #fff;
  background-color: #000;
  padding: 0.25rem 0.5rem;
  border-radius: 50%;
}

在这个 CSS 代码中，我们设置了关闭按钮的位置、大小、样式和颜色。

position 属性设置为 absolute，这样我们可以使用 top 和 right 属性来设置关闭按钮在页面上的位置。这里我们设置在浏览器右上角，距离顶部和右侧均为 5px。

font-size 属性设置了字体的大小，这里我们设置为 1.5rem。

text-decoration 属性设置文本装饰，这里我们设置为 none，去除下划线。

color 和 background-color 属性分别设置了字体颜色和背景颜色。这里我们设置字体颜色为白色，背景颜色为黑色。

padding 属性设置了内边距，这里我们设置为 0.25rem 0.5rem，也可以根据需求自己调整。

border-radius 属性设置了边框半径，这里我们设置为 50%，使其呈圆形。

结论

通过上述代码，我们就创建了一个基础 CSS 关闭按钮。

这个按钮可以自适应浏览器大小，并且可以通过 CSS 样式修改。

<a href="#" class="close-button">&times;</a>

.close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 1.5rem;
  text-decoration: none;
  color: #fff;
  background-color: #000;
  padding: 0.25rem 0.5rem;
  border-radius: 50%;
}