將圖片設(shè)置為圓形，同學(xué)們都不陌生吧，比如頭像。那么 CSS 如何顯示圓形圖片呢？我們?nèi)绾螌D片變?yōu)閳A形呢？這篇文章來告訴你。
border-radius 屬性
border-radius 屬性是用來實(shí)現(xiàn)圓角技術(shù)的，我們上傳一張正方形圖片后，將它屬性值設(shè)置為圖片尺寸的一半，即可將正方形圖片設(shè)置為圓形。
我們來看下具體效果：為了直觀演示，此處使用 div 進(jìn)行演示。
具體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS設(shè)置圓形圖片- 編程獅(w3cschool.cn)</title>
<style>
#first{
height: 100px;
width: 100px;
background-color: pink;
float: left;
}
#second{
height: 100px;
width: 100px;
background-color: red;
float: left;
margin-left: 10px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
</body>
</html>如果不清楚圖片的尺寸大小，直接將 border-radius 的值設(shè)為 50% 即可。
以上就是文章“CSS 如何顯示圓形圖片？如何將圖片變?yōu)閳A形”的全部內(nèi)容。更多 CSS 學(xué)習(xí)請前往 w3cschool。
