css3 绘制关闭按钮

CSS3 绘制关闭按钮的方法

.close-button {
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
}
.close-button::before, .close-button::after {
    content: ';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background-color: black;
    transform: translate(-50%, -50%) rotate(45deg);
}
.close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
    

通过 CSS3 可以非常方便地绘制关闭按钮，而且可以灵活地控制按钮的样式。

以上代码中，我们定义了一个名为 .close-button 的样式。该样式将被应用在一个带有类名 “close-button” 的元素上，通常是一个链接或是按钮。

该元素的宽和高都设置为 40 像素，定位方式为相对定位（即相对于其所在的容器定位）。光标的样式设为指针，以便表明这是一个可交互的按钮。

接下来我们用 ::before 和 ::after 伪元素来定义两根线条。它们被定位在该元素的正中心，且长度为 24 像素，宽度为 2 像素。

接着我们使用 transform 属性将这两根线条旋转 45 度和 -45 度（即成为 X 形），最后再通过 translate 函数将它们定位在元素的正中心。

通过以上代码，我们成功绘制了一个简单的关闭按钮！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！