溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“css怎么將圖片設置為圓形圖片”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“css怎么將圖片設置為圓形圖片”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
css將圖片設置為圓形圖片的方法：可以利用border-radius屬性來設置圓形圖片，代碼如【border-radius:50%】。border-radius屬性允許我們為元素添加圓角邊框。
屬性介紹：
border-radius 屬性允許我們為元素添加圓角邊框。
語法：
border-radius: 1-4 length|% / 1-4 length|%;
注意: 每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
屬性值：
length 定義彎道的形狀。
% 使用%定義角落的形狀。
具體實現代碼如下：
style{
.circle{
width:120px;
height:120px;
border-radius:50%;
overflow:hidden;
}
.circle > img{
width: 100%;
height: 100%;
}
}
<div class="circle">
<img src="你的圖片" alt="正方形的原始圖片" />
</div>以上是“css怎么將圖片設置為圓形圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
