CSS3 Close是一個常用的樣式效果,它常常用于顯示關閉按鈕等元素。
.close { display: inline-block; position: relative; width: 20px; height: 20px; } .close:before, .close:after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 10px; background-color: black; } .close:before { transform: translate(-50%, -50%) rotate(45deg); } .close:after { transform: translate(-50%, -50%) rotate(-45deg); }
使用CSS3 Close非常簡單,只需要在HTML代碼中嵌入相應的標簽并為其添加CSS樣式即可:
<a class="close" href="#"></a>
上述代碼將會在網頁中添加一個大小為20px的關閉按鈕,同時添加了旋轉45度和-45度的兩條直線形成一個十字形狀。
需要注意的是,CSS3 Close并不是所有瀏覽器都支持,在使用之前應該先進行兼容性測試,如果存在兼容性問題,可以通過JavaScript等腳本語言來實現相同的效果。
上一篇html 插音樂代碼