CSS中怎么寫橫豎交叉線

在CSS中，我們可以使用線性漸變（linear-gradient）來繪制橫豎交叉線，線性漸變可以創(chuàng)建平滑的漸變色帶，通過調整漸變的起始和結束位置，我們可以實現(xiàn)橫豎交叉的效果。

下面是一個簡單的示例代碼，展示了如何在CSS中創(chuàng)建橫豎交叉線：

.cross-line {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #000 50%, #fff 50%),
            linear-gradient(-45deg, #000 50%, #fff 50%);
  position: relative;
}

在這個示例中，我們創(chuàng)建了一個名為.cross-line的類，用于表示橫豎交叉線，這個類具有width和height屬性，分別設置為200px，以定義交叉線的大小。

背景屬性background中使用了兩個線性漸變，分別沿著45度和-45度的方向進行漸變，漸變的起始和結束位置都設置為50%，以實現(xiàn)交叉線的效果，顏色從#000（黑色）漸變到#fff（白色）。

通過position: relative;將交叉線相對于其包含塊進行定位。

你可以將上述代碼復制到你的CSS文件中，并應用到需要顯示橫豎交叉線的地方。

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

這樣，你就會在頁面中看到一個橫豎交叉的線條了，你可以根據(jù)需要調整交叉線的大小、顏色和位置。