偽類是CSS中的一種選擇器,它可以匹配元素的特定狀態,比如鼠標懸停在元素上、鏈接被訪問過等等。
其中,倒角是一種常用的布局方式,可以使元素的邊框看起來更圓滑。在CSS中,我們可以通過偽類來實現元素的倒角效果。
/*使用border-radius屬性,將選取的元素的四個角都設置為圓角*/ div { border-radius: 5px; } /*使用border-top-left-radius和border-top-right-radius屬性,將元素的左上角和右上角設置為圓角*/ div:hover { border-top-left-radius: 10px; border-top-right-radius: 10px; } /*使用border-bottom-left-radius和border-bottom-right-radius屬性,將元素的左下角和右下角設置為圓角*/ a:visited { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
通過使用不同的border-radius屬性,我們可以控制選取的元素的不同角落的圓角大小,從而實現各種不同樣式的倒角效果。
需要注意的是,在不同偽類下,我們可以使用不同的border-radius屬性組合實現預期效果。
上一篇css 偽類 順序
下一篇css 偽元素氣泡對話框