亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時(shí)間：2014-10-10 10:57:15   作者：佚名   我要評(píng)論
這篇文章主要為大家介紹了正方形圖片使用CSS如何實(shí)現(xiàn)成圓形布局，不使用PS軟件處理，直接使用DIV CSS布局如何實(shí)現(xiàn)圖片圓形化，具體實(shí)現(xiàn)過(guò)程請(qǐng)看下文

　　一、圖片實(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源代碼完整代碼：


復(fù)制代碼
代碼如下:
　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="utf-8" />
　　<title>圖片圓形布局 在線演示 DIVCSS5</title>
　　<link href="images/style.css" rel="stylesheet" type="text/css" />
　　<!-- http://chabaoo.cn/-->
　　</head>
　　<body>
　　<div id="divcss5"><img src="images/1.jpg" /></div>
　　</body>
　　</html>

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


復(fù)制代碼
代碼如下:
　　#divcss5{ margin:10px auto}
　　#divcss5 img{ border-radius:50%}

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

　　3、瀏覽器效果截圖

　　

相關(guān)文章

最新評(píng)論