请问这种自定义的关闭按钮用CSS如何实现？

Question

我看了网页，它不是用的图片，但是不知道它是怎么实现的，我是新ren

Answer 1

您可以使用伪元素

:before
或
:after

来实现自定义关闭按钮的效果，具体实现方式如下：

1. 在HTML文件中添加关闭按钮相关的元素及class类名，例如：

   <div class="close-button">Close</div>
   

2. 在CSS文件中定义.close-button类，设置其样式，以及使用

   :before或:after
   

   来生成一个伪元素，用于显示关闭图标。例如：

.close-button {
   position: relative;
   display: inline-block;
   padding: 0.5rem 1rem;
   background-color: #333;
   color: #fff;
   font-size: 1.2rem;
   cursor: pointer;
}

/* 生成伪元素 */
.close-button::before {
   content: "x";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 1.5rem;
   color: #fff;
}

在上述代码中，我们首先对.close-button类进行了一些基本样式的设置，例如设置宽高、背景颜色、字体大小等，根据实际需要可以对样式进行调整。

然后，我们使用:before伪元素来生成一个x形状的关闭图标，content属性用于指定元素的内容，top、left和transform属性用于将伪元素居中在close-button元素中央，并使用字体图标或其他方法实现关闭图标的显示。

最后，在HTML文件中引入这个CSS文件即可。