色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css里面打鉤

錢諍諍2年前8瀏覽0評論

CSS中打鉤的方式有很多種,這里介紹其中兩種比較常見的寫法。

第一種方法是使用CSS偽元素的:before或:after,結(jié)合content屬性來實(shí)現(xiàn)打鉤效果。

.tick:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 20px;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
transform: translateY(-50%) rotate(45deg);
}

上面的代碼中,我們創(chuàng)建了一個(gè)偽元素:before,并設(shè)置了content屬性為空字符串。為了讓偽元素顯示在父元素內(nèi)部,需要將其設(shè)置為塊級元素,并使用position屬性將其定位在父元素的中心位置。為了實(shí)現(xiàn)鉤的形狀,我們使用border-bottom和border-right屬性分別繪制底邊和右邊的直線,然后通過transform屬性將偽元素旋轉(zhuǎn)45度并向上移動(dòng)50%的高度,來獲得鉤的形狀。

第二種方法是使用SVG圖形,將其嵌入到HTML頁面中,并使用CSS對其進(jìn)行樣式修改。

.tick svg {
width: 20px;
height: 20px;
stroke: #000;
stroke-width: 2;
fill: none;
}
.tick svg path {
transition: stroke-dasharray .4s ease;
stroke-dasharray: 15 35;
stroke-dashoffset: -15;
}
.tick.checked svg path {
stroke-dasharray: 50 0;
stroke-dashoffset: 0;
}

上面的代碼中,我們首先創(chuàng)建了一個(gè)SVG圖形,沒有填充色,只有黑色的線條。然后通過CSS對其進(jìn)行樣式修改,包括寬度、高度、線條顏色和寬度等屬性。為了實(shí)現(xiàn)打鉤的效果,我們使用stroke-dasharray和stroke-dashoffset屬性創(chuàng)建了一個(gè)虛線效果,stroke-dasharray屬性指定了虛線的樣式,stroke-dashoffset屬性指定了虛線起點(diǎn)的偏移量。當(dāng)元素被選中時(shí),我們再使用CSS修改stroke-dasharray和stroke-dashoffset屬性的值,實(shí)現(xiàn)打鉤的效果。