如何用CSS將正方形圖片顯示為圓形圖片布局

發(fā)布時(shí)間：2021-07-29 21:57:55 來(lái)源：億速云閱讀：488 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“ 如何用CSS將正方形圖片顯示為圓形圖片布局”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“ 如何用CSS將正方形圖片顯示為圓形圖片布局”吧!

　　一、圖片實(shí)現(xiàn)圓形條件

　　原本不是圓形圖片，通過(guò)CSS樣式布局實(shí)現(xiàn)成圓形圖片，首先圖片必須為正方形。

　　二、使用布局技術(shù)

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

　　使用CSS3樣式單詞：border-radius

　　語(yǔ)法：

　　div{border-radius:5px}

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

　　.abc img{border-radius:5px}

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

　　三、CSS圓角實(shí)現(xiàn)圖片圓形實(shí)例

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

　　本案例在DIVCSS5初始化模板基礎(chǔ)上完成。

　　1、HTML源代碼完整代碼：

代碼如下:

<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="utf-8" />
　　<title>圖片圓形布局在線演示 DIVCSS5</title>
　　<link href="images/style.css" rel="stylesheet" type="text/css" />
　　
　　</head>
　　<body>
　　<div id="divcss5"><img src="images/1.jpg" /></div>
　　</body>
　　</html>

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

代碼如下:

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

　　命名盒子“id=divcss5”盒子居中，同時(shí)上下外間距為10px;，然后設(shè)置對(duì)象盒子里img圖片圓角50%

　　3、瀏覽器效果截圖

如何用CSS將正方形圖片顯示為圓形圖片布局

到此，相信大家對(duì)“ 如何用CSS將正方形圖片顯示為圓形圖片布局”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

如何用CSS將正方形圖片顯示為圓形圖片布局

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽