十字架是基督教的象征之一，也是許多網(wǎng)站設(shè)計(jì)中常用的元素。在CSS中，我們可以通過簡單的代碼實(shí)現(xiàn)一個(gè)漂亮的十字架。

.cross {
position: relative;
width: 120px;
height: 120px;
border: 4px solid #000000;
box-sizing: border-box;
}
.cross:before,
.cross:after {
content: "";
position: absolute;
background-color: #000000;
}
.cross:before {
top: 50%;
left: -4px;
width: calc(50% + 2px);
height: 8px;
transform: translateY(-50%);
}
.cross:after {
left: 50%;
top: -4px;
height: calc(50% + 2px);
width: 8px;
transform: translateX(-50%);
}

這段代碼基于一個(gè)120x120像素的容器，然后添加了一些偽元素:before和:after來創(chuàng)建實(shí)際的十字形狀。首先，我們?cè)谌萜魃咸砑右恍邮剑ㄒ粋€(gè)黑色的4像素邊框和盒模型樣式（使邊框不超出容器邊緣）。

然后我們創(chuàng)建:before和:after元素，同時(shí)給它們一個(gè)黑色的背景顏色。為了創(chuàng)建橫杠，我們將:before元素的左邊位置設(shè)為負(fù)4像素（等于容器的邊框?qū)挾龋瑢挾仍O(shè)置為計(jì)算得出的容器寬度的50%加上2像素（用于覆蓋容器邊框），高度為8像素，然后使用translateY屬性將元素垂直居中。

類似地，我們創(chuàng)建一個(gè):after元素來創(chuàng)建豎杠。我們將其頂部位置設(shè)為負(fù)4像素以覆蓋容器邊框，將其左側(cè)設(shè)置為50%以使其水平居中（使用translateX），然后將其高度設(shè)置為計(jì)算得出的容器高度的50%再加上2像素（用于覆蓋容器邊框）。

使用這段CSS代碼，您可以快速輕松地在您的項(xiàng)目中添加一個(gè)漂亮的十字架。