CSS是一種用于控制網(wǎng)頁布局和樣式的語言,在CSS中我們可以使用一些技巧來繪制簡(jiǎn)單的圖形。這篇文章將介紹如何使用CSS畫出一個(gè)加號(hào)。
.plus { width: 50px; height: 50px; background: #000; position: relative; } .plus:before, .plus:after { content: ""; width: 25px; height: 5px; background: #fff; position: absolute; top: 22px; left: 12px; } .plus:before { transform: rotate(90deg); }
上面的代碼中,我們使用一個(gè)div元素來作為加號(hào)的容器,設(shè)置其寬高為50px,背景顏色為黑色。然后我們使用:before和:after偽元素來繪制加號(hào)的兩條直線。
在:before偽元素中,我們將其寬高設(shè)置為25px和5px,然后使用transform: rotate(90deg)將其旋轉(zhuǎn)90度,變成了豎直的直線。在:after偽元素中,我們將其寬高同樣設(shè)置為25px和5px,然后直接放置在其原始位置。
通過這些CSS代碼,我們成功地繪制出了一個(gè)簡(jiǎn)單的加號(hào)。你可以通過調(diào)整div的寬高、調(diào)整:before和:after的大小和位置來制作出更多不同樣式的加號(hào)。
上一篇mysql中的鎖的概念
下一篇$null_json