十字架是基督教的象征之一，也是許多網站設計中常用的元素。在CSS中，我們可以通過簡單的代碼實現一個漂亮的十字架。

.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%);
}

這段代碼基于一個120x120像素的容器，然后添加了一些偽元素:before和:after來創建實際的十字形狀。首先，我們在容器上添加一些樣式，包括一個黑色的4像素邊框和盒模型樣式（使邊框不超出容器邊緣）。

然后我們創建:before和:after元素，同時給它們一個黑色的背景顏色。為了創建橫杠，我們將:before元素的左邊位置設為負4像素（等于容器的邊框寬度），寬度設置為計算得出的容器寬度的50%加上2像素（用于覆蓋容器邊框），高度為8像素，然后使用translateY屬性將元素垂直居中。

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

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