[分享]css做十字架

CSS是Cascade Style Sheets的缩写，可以理解为层叠样式表。通过使用CSS，我们可以对网页中的元素进行风格和布局的控制。今天我们来探讨如何使用CSS制作一个简单的十字架。.cross...

CSS是Cascade Style Sheets的缩写，可以理解为层叠样式表。通过使用CSS，我们可以对网页中的元素进行风格和布局的控制。今天我们来探讨如何使用CSS制作一个简单的十字架。

.cross {
    width: 100px;
    height: 100px;
    background-color: white;
    border: 2px solid black;
    position: relative;
}

.cross:before,
.cross:after {
    content: "";
    position: absolute;
    background-color: black;
}

/* 画垂直线 */
.cross:before {
    top: 0;
    bottom: 0;
    width: 2px;
    left: 50%;
    transform: translateX(-50%);
}

/* 画水平线 */
.cross:after {
    left: 0;
    right: 0;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
} 

首先，我们创建一个具有指定宽度和高度的盒子，并将它的背景颜色设置为白色，边框为2像素的黑色实线。接下来，我们使用绝对定位，创建一个伪元素:before，并设置其颜色为黑色。为了画出垂直线，我们将伪元素的左侧位置设置为50%，并通过transform属性在水平方向上将它向左偏移50%自身宽度的距离，使其与中心对齐。同时，我们通过设置伪元素的上下位置来延伸至盒子顶部和底部，并将其宽度设置为2像素。我们重复相同的步骤来创建另一个伪元素:after，并使用其来画水平线。设置其上下位置为50%，让其与中心对齐，同时设置其左右位置来延伸至盒子的左侧和右侧，将其高度设置为2像素。

这就是一个英国式的十字架造型，非常简单，也非常实用。通过CSS，我们可以轻松地指定它的风格和布局，从而实现各种各样的效果。学会使用CSS，你的网页效果将会更加美观，吸引更多的用户。