css如何將圖片設定為圓形圖片

css將圖片設定為圓形圖片的方法：可以利用border-radius屬性來設定圓形圖片，程式碼如【border-radius:50%】。 border-radius屬性允許我們為元素新增圓角邊框。

本文操作環境：windows10系統、css 3、thinkpad t480電腦。

屬性介紹：

border-radius 屬性允許我們為元素新增圓角邊框。

語法：

border-radius: 1-4 length|% / 1-4 length|%;

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

屬性值：

• length    定義彎道的形狀。   

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

具體實作程式碼如下：

（學習影片分享：css影片教學）

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教學

以上是css如何將圖片設定為圓形圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！