本篇內容主要講解“ 如何用CSS將正方形圖片顯示為圓形圖片布局”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“ 如何用CSS將正方形圖片顯示為圓形圖片布局”吧!
一、圖片實現圓形條件
原本不是圓形圖片，通過CSS樣式布局實現成圓形圖片，首先圖片必須為正方形。
二、使用布局技術
使用CSS3 圓角技術實現。
使用CSS3樣式單詞：border-radius
語法：
div{border-radius:5px}
對圖片設置圓角樣式：
.abc img{border-radius:5px}
設置class=”abc”對象圖片四個角圓角為5px
三、CSS圓角實現圖片圓形實例
首先一張正方形圖片，放入一個DIV盒子內，通過對盒子內圖片設置border-radius:50%實現圓形效果。
本案例在DIVCSS5初始化模板基礎上完成。
1、HTML源代碼完整代碼：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片圓形布局 在線演示 DIVCSS5</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<!-- http://www.dadijd.cn/-->
</head>
<body>
<div id="divcss5"><img src="images/1.jpg" /></div>
</body>
</html>
2、對應CSS代碼：
代碼如下:
#divcss5{ margin:10px auto}
#divcss5 img{ border-radius:50%}
命名盒子“id=divcss5”盒子居中，同時上下外間距為10px;，然后設置對象盒子里img圖片圓角50%
3、瀏覽器效果截圖
到此，相信大家對“ 如何用CSS將正方形圖片顯示為圓形圖片布局”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
