html怎么讓圖片變圓角

本文小編為大家詳細(xì)介紹“html怎么讓圖片變圓角”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“html怎么讓圖片變圓角”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

　　在css樣式中有一個屬性：border-radius屬性是就常見

　　也是最簡單、快速設(shè)置圓角效果的屬性；border-radius(含義是"邊框半徑")，只需要給border-radius

　　提供值，就能設(shè)置邊框圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等都可以。

　　border-radius包含5種設(shè)置圓角樣式方式：

　　border-radius ：同時設(shè)置4個邊框的圓角樣式。

　　border-top-left-radius ：設(shè)置左上角邊框的圓角樣式。

　　border-top-right-radius ：設(shè)置右上角邊框的圓角樣式。

　　border-bottom-left-radius ：設(shè)置左下角邊框的圓角樣式。

　　border-bottom-right-radius ：設(shè)置右下角邊框的圓角樣式。

　　圖片示例(設(shè)置四個邊框圓角值為20px)：

　　border-radius的參數(shù)說明：

　　border-radius可以一次性對四個角設(shè)置相同的值，也可以對4個角分別設(shè)置圓角樣式。而秘訣就在于設(shè)定border-radius的參數(shù)個數(shù)，border-radius的參數(shù)個數(shù)范圍為1——4個。

　　下面分別說明參數(shù)1——4個所代表的含義：

　　1. 當(dāng)參數(shù)個數(shù)為：1

　　說明：4個邊框的圓角樣式都采用這個設(shè)置。

　　例：border-radius：20px;

　　2.當(dāng)參數(shù)個數(shù)為：2

　　說明：

　　第1參數(shù)：左上角和右下角邊框的圓角樣式。

　　第2參數(shù)：右上角和左下角邊框的圓角樣式。

　　例：border-radius：20px 10px;

　　3. 當(dāng)參數(shù)個數(shù)為：3

　　說明：

　　第1參數(shù)：左上角邊框的圓角樣式。

　　第2參數(shù)：右上角和左下角邊框的圓角樣式。

　　第3參數(shù)：右下角邊框的圓角樣式。

　　例：border-radius：20px 10px 40px;

　　4.當(dāng)參數(shù)個數(shù)為：4

　　說明：

　　第1參數(shù)：左上角邊框的圓角樣式。

　　第2參數(shù)：右上角邊框的圓角樣式。

　　第3參數(shù)：右下角邊框的圓角樣式。

　　第4參數(shù)：左下角邊框的圓角樣式。

　　例：border-radius：20px 10px 50px 30px;

　　當(dāng)然上圖的樣式也可以用圓角的單獨(dú)樣式來設(shè)置：border-top-left-radius ：20px。

　　border-top-right-radius ：10px。

　　border-bottom-left-radius ：30px。

　　border-bottom-right-radius ：50px。

　　只是這樣設(shè)置太過于繁瑣，不利于優(yōu)化了css文件代碼。

　　圓形邊框(實(shí)例介紹)

　　.demo{

　　width: 100px;

　　height: 100px;

　　border: 1px solid salmon;

　　background-color: salmon;

　　border-radius: 100%;

　　}

　　只要把border-radius里的值設(shè)置為100%，就可以得到這樣的一個圓形邊框。圓形邊框可以用在用戶的頭像展示等等方法。

讀到這里，這篇“html怎么讓圖片變圓角”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。