css3裡怎麼顯示圓形圖片
- php中世界最好的语言原創
- 2017-11-22 16:23:275358瀏覽
很多朋友只清楚怎麼顯示圖片，但是不知道怎樣用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中文網其它相關文章！
相關閱讀：
以上是css3裡怎麼顯示圓形圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：class與id有什麼差別下一篇：class與id有什麼差別