搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

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

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

本文实例为大家分享了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>

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

以下您可能有感兴趣的文章:
标签： 圆角
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图