CSS3制作圆角图片和椭圆形图片

互联网
夕阳的金辉把绿色的林海染成金黄一片。火红的太阳慢慢地西落了，归鸟们纷纷从我头上飞过，飞回到它们的小巢。一轮明月从东方静悄悄地升上来。夜空中美丽的星星，似乎在眨着眼睛对我说：夜，来了！

本文实例为大家分享了CSS3制作圆角和椭圆形图片的方法，供大家参考，具体内容如下

1、圆角图片

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <style>
  5. img{
  6. border-radius:8px;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h2>圆角图片</h2>
  12. <p>使用border-radius属性来创建圆角图片:</p>
  13. <imgsrc="paris.jpg"alt="Paris"width="400"height="300">
  14. </body>
  15. </html>

2、椭圆形图片

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <style>
  5. img{
  6. border-radius:50%;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <h2>椭圆形图片</h2>
  12. <p>使用border-radius属性来创建椭圆形图片：</p>
  13. <imgsrc="paris.jpg"alt="Paris"width="400"height="300">
  14. </body>
  15. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能有感兴趣的文章
CSS3如何实现内凹圆角的实例代码
CSS3圆角边框和边界图片效果实例
border-radius以外的CSS圆角边框制作方法
CSS圆角边框制作指南与实例
CSS3圆角和渐变2种常用功能详解