App下載

CSS如何顯示圓形圖片？如何將圖片變?yōu)閳A形

猿友 2021-06-01 11:18:37 瀏覽數(shù) (9087)
反饋

將圖片設(shè)置為圓形，同學(xué)們都不陌生吧，比如頭像。那么 CSS 如何顯示圓形圖片呢？我們?nèi)绾螌D片變?yōu)閳A形呢？這篇文章來(lái)告訴你。

border-radius 屬性

border-radius 屬性是用來(lái)實(shí)現(xiàn)圓角技術(shù)的，我們上傳一張正方形圖片后，將它屬性值設(shè)置為圖片尺寸的一半，即可將正方形圖片設(shè)置為圓形。

我們來(lái)看下具體效果：為了直觀演示，此處使用 div 進(jìn)行演示。

CSS設(shè)置圓形圖片

具體代碼：

<!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形”的全部?jī)?nèi)容。更多 CSS 學(xué)習(xí)請(qǐng)前往 w3cschool。

CSS

0 人點(diǎn)贊