實(shí)現(xiàn)對(duì)號(hào)效果，一種思路是利用現(xiàn)成的符號(hào)，直接在網(wǎng)上搜索到 √，插入頁(yè)面。另一種思路是本文要介紹的用 CSS 實(shí)現(xiàn)，思路是：

給塊級(jí)元素設(shè)置寬度和高度

設(shè)置元素相鄰的兩個(gè) border

旋轉(zhuǎn)元素

HTML

解析

此處需要使用塊級(jí)元素

不需要設(shè)置元素內(nèi)容

CSS

.check-style-unequal-width {

width: 8px;

height: 16px;

border-color: #009933;

border-style: solid;

border-width: 0 3px 5px 0;

transform: rotate(45deg);

}

解析

設(shè)置寬度和高度，得出一個(gè)矩形效果，并且矩形中沒(méi)有內(nèi)容

設(shè)置相鄰 border 的樣式，得到對(duì)號(hào)的大體輪廓

使用旋轉(zhuǎn)屬性，成功得到對(duì)號(hào)

解析

如上圖，第一個(gè)為兩條線等寬的對(duì)號(hào)效果，第二個(gè)為兩條線不等寬的對(duì)號(hào)效果；第三個(gè)為兩條線等寬等長(zhǎng)的對(duì)號(hào)效果。詳細(xì)實(shí)現(xiàn)請(qǐng)參見(jiàn) check 源碼。

注意事項(xiàng)

行級(jí)元素直接設(shè)置寬度和高度沒(méi)有用，需要設(shè)置其 display 使其變?yōu)閴K級(jí)元素。例如：span 需要設(shè)置 display 為 inline-block 才能適用于本例效果

可以根據(jù)實(shí)際需求調(diào)整元素寬度和高度

可以根據(jù)實(shí)際需求設(shè)置不同的 border，以及相鄰 border 的寬度

可以對(duì)此效果做簡(jiǎn)單的修改，作用于偽元素 ::before 和 ::after。可參考 ::before & ::after

-——————–

作者：南張人

來(lái)源：CSDN

原文：https://blog.csdn.net/u011848617/article/details/82824054

https://www.cnblogs.com/xiaoshen666/category/1433991.html

總結(jié)

以上是生活随笔為你收集整理的java 返回一个对号_CSS 实现对号效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。