溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css實現對號效果的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
實現對號效果，一種思路是利用現成的符號，直接在網上搜索到 √，插入頁面。另一種思路是本文要介紹的用 CSS 實現，思路是：
給塊級元素設置寬度和高度
設置元素相鄰的兩個 border
旋轉元素
HTML
<div class="check-style-unequal-width"></div>
解析：
此處需要使用塊級元素
不需要設置元素內容
CSS
.check-style-unequal-width {
width: 8px;
height: 16px;
border-color: #009933;
border-style: solid;
border-width: 0 3px 5px 0;
transform: rotate(45deg);
}解析：
設置寬度和高度，得出一個矩形效果，并且矩形中沒有內容
設置相鄰 border 的樣式，得到對號的大體輪廓
使用旋轉屬性，成功得到對號
運行效果
解析：
如上圖，第一個為兩條線等寬的對號效果，第二個為兩條線不等寬的對號效果；第三個為兩條線等寬等長的對號效果。詳細實現請參見 check 源碼。
注意事項：
行級元素直接設置寬度和高度沒有用，需要設置其 display 使其變為塊級元素。例如：span 需要設置 display 為 inline-block 才能適用于本例效果
可以根據實際需求調整元素寬度和高度
可以根據實際需求設置不同的 border，以及相鄰 border 的寬度
可以對此效果做簡單的修改，作用于偽元素 ::before 和 ::after。可參考 ::before & ::after
感謝你能夠認真閱讀完這篇文章，希望小編分享css實現對號效果的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
