首頁 > 文章 > web前端 > css3裡怎麼顯示圓形圖片

css3裡怎麼顯示圓形圖片

php中世界最好的语言原創: 2017-11-22 16:23:275395瀏覽

很多朋友只清楚怎麼顯示圖片，但是不知道怎樣用CSS樣式佈局實現成圓形圖片，那麼今天就來教大家如何用CSS做出圓形圖片的顯示

首先圖片必須為正方形。

使用佈局技術

使用CSS3 圓角技術實作。

使用CSS3樣式單字：border-radius

語法：

div{border-radius:5px}

對圖片設定圓角樣式：

.abc img{border-radius: 5px}

設定class=”abc”物件圖片四個角圓角為5px

CSS圓角實現圖片圓形實例

首先一張正方形圖片，放入DIV盒子內，透過對盒子內圖片設定border-radius:50%實現圓形效果。

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、對應CSS程式碼：

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

用CSS樣式佈局實作圓形圖片方法就是這麼多了。更多精彩請關注php中文網其它相關文章！