CSS的布局特性常常被用來實現各種形狀的樣式效果，在本文中我們將介紹如何使用CSS實現十字的效果。

.cross {
width: 300px; /* 設置容器寬度 */
height: 300px; /* 設置容器高度 */
position: relative; /* 設置相對定位 */
}
.cross::before,
.cross::after {
content: ''; /* 必須加此項才能顯示偽元素 */
position: absolute; /* 設置絕對定位 */
top: 50%; /* 設置上下居中 */
left: 0; /* 偽元素定位在容器最左 */
width: 100%; /* 偽元素寬度占滿整個容器 */
height: 2px; /* 偽元素高度為2個像素 */
background-color: #000; /* 設置黑色背景色 */
transform: translateY(-50%); /* 讓偽元素上下居中 */
}
.cross::before {
transform: rotate(45deg); /* 旋轉45度 */
}
.cross::after {
transform: rotate(-45deg); /* 旋轉-45度 */
}

在HTML中，我們只需要定義一個容器元素，使用CSS中的偽元素before和after來分別實現十字的兩條線段：

<div class="cross"></div>

在瀏覽器中運行代碼，即可看到實現了十字的效果。