明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

css3里如何顯示圓形圖片

發(fā)表時間：2023-12-27 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]很多朋友只清楚怎樣顯示圖片，但是不知道怎樣用CSS樣式布局實現(xiàn)成圓形圖片，那么今天就來教大家如何用CSS做出圓形圖片的顯示首先圖片必須為正方形。使用布局技術(shù)使用CSS3 圓角技術(shù)實現(xiàn)。使用CSS3樣式單詞：border-radius語法：div{border-radius:5px}對圖片設(shè)置圓角樣...
很多朋友只清楚怎樣顯示圖片，但是不知道怎樣用CSS樣式布局實現(xiàn)成圓形圖片，那么今天就來教大家如何用CSS做出圓形圖片的顯示

首先圖片必須為正方形。

使用布局技術(shù)

使用CSS3 圓角技術(shù)實現(xiàn)。

使用CSS3樣式單詞：border-radius

語法：

div{border-radius:5px}

對圖片設(shè)置圓角樣式：

.abc img{border-radius:5px}

設(shè)置class=”abc”對象圖片四個角圓角為5px

CSS圓角實現(xiàn)圖片圓形實例

首先一張正方形圖片，放入一個DIV盒子內(nèi)，通過對盒子內(nèi)圖片設(shè)置border-radius:50%實現(xiàn)圓形效果。

1、HTML源代碼完整代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>圖片圓形布局 在線演示</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
<div id="div"><img src="images/1.jpg" /></div> 
</body> 
</html>

2、對應(yīng)CSS代碼：

#div{ margin:10px auto} 
#div img{ border-radius:50%}

用CSS樣式布局實現(xiàn)成圓形圖片方法就是這么多了。更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

如何使用text-decoration


HTML里table標(biāo)簽的使用方法


css的網(wǎng)頁邊框代碼

以上就是css3里怎么顯示圓形圖片的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。