這篇文章主要講解了“css中的圖片如何變圓”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css中的圖片如何變圓”吧！

創(chuàng)新互聯(lián)公司成立于2013年，先為鳳陽(yáng)等服務(wù)建站，鳳陽(yáng)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鳳陽(yáng)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

在css中，可以利用border-radius屬性來(lái)讓圖片變圓，只需要給img元素添加“border-radius: 50%;”樣式即可。border-radius屬性可以給元素設(shè)置圓角邊框，圓角的半徑不能超過(guò)寬/高的一半。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中，可以利用border-radius屬性來(lái)讓圖片變圓。

下面通過(guò)代碼示例來(lái)具體看看：

	
		
		
			img{
				border-radius: 50%;
			}
		
	
	
		

	

效果圖：

說(shuō)明：

border-radius屬性用于給元素設(shè)置圓角邊框，可以指定1-4值，為邊框創(chuàng)建（1~4個(gè)）圓角效果；圓角的半徑不能超過(guò)寬/高的一半。

語(yǔ)法：

border-radius: 1-4 length|%

值：

• length    定義彎道的形狀。

• %    使用%定義角落的形狀。

注意: 每個(gè)半徑的四個(gè)值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

• 四個(gè)值: 第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角。

  border-radius: 15px 50px 30px 5px

  

• 三個(gè)值: 第一個(gè)值為左上角, 第二個(gè)值為右上角和左下角，第三個(gè)值為右下角

  border-radius: 15px 50px 30px

  

• 兩個(gè)值: 第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角

  border-radius: 15px 50px

  

• 一個(gè)值： 四個(gè)圓角值相同

  border-radius: 25px

  

感謝各位的閱讀，以上就是“css中的圖片如何變圓”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css中的圖片如何變圓這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！