CSS3制作圓角圖片和橢圓形圖片
發(fā)布時間:2016-07-08 10:44:18 作者:佚名
我要評論

這篇文章主要教大家CSS3制作圓角圖片和橢圓形圖片的具體實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了CSS3制作圓角和橢圓形圖片的方法,供大家參考,具體內(nèi)容如下
1、圓角圖片
XML/HTML Code復制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- img {
- border-radius: 8px;
- }
- </style>
- </head>
- <body>
- <h2>圓角圖片</h2>
- <p>使用 border-radius 屬性來創(chuàng)建圓角圖片:</p>
- <img src="paris.jpg" alt="Paris" width="400" height="300">
- </body>
- </html>
2、橢圓形圖片
XML/HTML Code復制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- img {
- border-radius: 50%;
- }
- </style>
- </head>
- <body>
- <h2>橢圓形圖片</h2>
- <p>使用 border-radius 屬性來創(chuàng)建橢圓形圖片:</p>
- <img src="paris.jpg" alt="Paris" width="400" height="300">
- </body>
- </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
- 本篇文章給大家介紹基于css3來實現(xiàn)邊框圓角效果,實現(xiàn)此效果當然border-radius要在firefox或Safari 和 Chrome才能實現(xiàn)哦。對css3圓角邊框制作代碼感興趣的朋友參考下吧2015-11-18
- 這篇文章主要介紹了CSS的一些圓角圖形實例分享,包括帶有3D效果的CSS圓角實現(xiàn),需要的朋友可以參考下2015-09-28
- 這篇文章主要介紹了CSS3繪制圓角矩形的簡單示例,注意一下各瀏覽器對CSS3的兼容性,需要的朋友可以參考下2015-09-28
- 這篇文章主要介紹了使用css實現(xiàn)圓角圖形繪制,文中也提到了相關的鋸齒問題,需要的朋友可以參考下2015-07-22
- 這篇文章主要為大家介紹了純CSS實現(xiàn)圓角折疊菜單的方法,通過多個寬度漸進變化的頁面元素堆加模擬圓角效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-19
- 這篇文章主要介紹了CSS實現(xiàn)反方向圓角的示例代碼的相關資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-12