欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

單標(biāo)簽純css

張吉惟2年前7瀏覽0評論

單標(biāo)簽純css指的是不需要閉合標(biāo)簽,只需要使用css即可實(shí)現(xiàn)一些效果的標(biāo)簽。這些標(biāo)簽的實(shí)現(xiàn)方式比較巧妙,也比較簡單,因此可以用來實(shí)現(xiàn)一些特殊效果。

<div class="arrow-up"></div>
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}

上面的代碼展示了一個箭頭的樣式,它只需要一個div標(biāo)簽即可實(shí)現(xiàn)。關(guān)鍵在于利用了邊框的特性,通過設(shè)置左、右邊框?yàn)橥该鳎撞窟吙驗(yàn)閷?shí)線,就可以達(dá)到箭頭的效果。

<div class="circle"></div>
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}

接下來展示了一個圓形的樣式,同樣只需要一個div標(biāo)簽即可實(shí)現(xiàn)。利用了border-radius屬性實(shí)現(xiàn)圓形,同時設(shè)置寬高和背景顏色即可。

<div class="triangle-up"></div>
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid red;
}

最后再展示一個三角形的樣式,同樣也只需要一個div標(biāo)簽即可實(shí)現(xiàn)。利用了邊框的特性,將左右邊框設(shè)置為透明,底部邊框設(shè)置為實(shí)線,高度為0,就可以實(shí)現(xiàn)一個平底三角形的效果。

總的來說,單標(biāo)簽純css的技巧雖然不算特別實(shí)用,但是在特殊效果的實(shí)現(xiàn)上還是蠻有趣的一個探索。