溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css中的圖片如何變圓”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css中的圖片如何變圓”吧！
在css中，可以利用border-radius屬性來讓圖片變圓，只需要給img元素添加“border-radius: 50%;”樣式即可。border-radius屬性可以給元素設置圓角邊框，圓角的半徑不能超過寬/高的一半。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中，可以利用border-radius屬性來讓圖片變圓。
下面通過代碼示例來具體看看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
img{
border-radius: 50%;
}
</style>
</head>
<body>
<img src="img/1.jpg" width="200" height="200"/>
</body>
</html>效果圖：
說明：
border-radius屬性用于給元素設置圓角邊框，可以指定1-4值，為邊框創建（1~4個）圓角效果；圓角的半徑不能超過寬/高的一半。
語法：
border-radius: 1-4 length|%
值：
length 定義彎道的形狀。
% 使用%定義角落的形狀。
注意: 每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
border-radius: 15px 50px 30px 5px
三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
border-radius: 15px 50px 30px
兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
border-radius: 15px 50px
一個值： 四個圓角值相同
border-radius: 25px
感謝各位的閱讀，以上就是“css中的圖片如何變圓”的內容了，經過本文的學習后，相信大家對css中的圖片如何變圓這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
