• 技术文章 >web前端 >css教程

    CSS3制作圆角图片和椭圆形图片的方法介绍

    高洛峰高洛峰2017-03-07 15:23:07原创1251
    这篇文章主要教大家CSS3制作圆角图片和椭圆形图片的具体实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

    1、圆角图片

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img {   
        border-radius: 8px;   
    }   
    </style>
    </head>
    <body>
    <h2>圆角图片</h2>
    <p>使用 border-radius 属性来创建圆角图片:</p>
    <img src="paris.jpg" alt="Paris" width="400" height="300">
    </body>
    </html>

    CSS3制作圆角图片和椭圆形图片的方法介绍

    2、椭圆形图片

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img {   
        border-radius: 50%;   
    }   
    </style>
    </head>
    <body>
    <h2>椭圆形图片</h2>
    <p>使用 border-radius 属性来创建椭圆形图片:</p>
    <img src="paris.jpg" alt="Paris" width="400" height="300">
    </body>
    </html>

    CSS3制作圆角图片和椭圆形图片的方法介绍

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

    更多CSS3制作圆角图片和椭圆形图片的方法介绍相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3 圆角 椭圆形
    上一篇:CSS3制作缩略图的详细过程分析 下一篇:css3media响应式布局实例分析
    千万级数据并发解决方案

    相关文章推荐

    • css3怎样实现不是直角的菱形效果• CSS如何进行性能优化?优化小技巧分享• css3框模型有几种属性• css样式中有文字描边吗• 2022年你值得了解的几个CSS新特性(收藏学习)
    1/1

    PHP中文网