CSS3又被稱為層疊樣式表3,是一種用于網頁制作的樣式表語言,可以使得網頁的樣式更加豐富、復雜。其中,CSS3中有一個重要的標記——叉號。
.cross { width: 100px; height: 100px; position: relative; border: 4px solid #000; transform: rotate(45deg); } .cross::before, .cross::after { content: ""; position: absolute; width: inherit; height: inherit; border: inherit; } .cross::before { transform: rotate(-90deg); } .cross::after { transform: rotate(90deg); }
如上述代碼所示,我們首先給.cross標簽設置了寬高,設為100px,然后將其相對定位。通過border屬性,我們給其添加了3個邊框,這里我們采用了黑色的實線邊框。接著,我們利用transform屬性讓其旋轉45度,變成一個斜立的叉號。
然后,在實現“叉”的兩個斜線的時候,我們利用了另外兩個偽元素:before和:after。這里,在兩個偽元素中,我們同樣都設置了content屬性為空,定位為絕對定位,并且繼承了.cross標簽的寬高和邊框粗細。但是,我們在兩個偽元素中都利用了transform屬性,讓:before旋轉到-90度的角度,:after旋轉到90度的角度,這樣就形成了叉號的兩個斜線。
通過上述代碼,我們可以通過CSS3輕松地實現一個漂亮的叉號,大大豐富了網頁的樣式,為網頁制作提供了更多的可能性。