CSS圓形圖片效果

admin發表於2018-08-07
CSS

本章節介紹一下如何通過css實現圓形圖片效果，直接上程式碼。

程式碼如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
div{
  width:120px; 
  height:120px; 
  border-radius:50%; 
  overflow:hidden;
}
</style> 
</head>
<body>
<div style="">
<img src="mytest/demo/tree.jpg" />
</div>
</body>
</html>

以上程式碼實現了我們的要求，也就是利用border-radius屬性實現此功能。

不過有著一點的瀏覽器相容性問題，IE9以下瀏覽器不支援此屬性，具體參閱CSS3實現圓角效果一章節。 

相關文章