当前位置:Gxlcms > html代码 > html与CSS如何实现圆形和圆角图片格式的示例代码

html与CSS如何实现圆形和圆角图片格式的示例代码

时间:2021-07-01 10:21:17 帮助过:29人阅读


效果展示



实现代码

<<!DOCTYPE html><html><head>
    <title>JcMan</title>
    <style type="text/css">

    .image1{ 
        margin-top: 100px; 
        width:200px; 
        height:200px; 
        border-radius:200px; 
    }

    .image2{        margin-top: 100px; 
        width:200px; 
        height:200px; 
        border-radius:20px; 
    }
    </style>
    </head>
    <body>
    <center>
    <img class="image1" src="http://b.hiphotos.baidu.com/image/pic/item/b999a9014c086e069cd7964b00087bf40ad1cbb7.jpg"/>
    <img class="image2" src="http://b.hiphotos.baidu.com/image/pic/item/b999a9014c086e069cd7964b00087bf40ad1cbb7.jpg"/> 
    </center>
    </body>
    </html>

以上就是html与CSS如何实现圆形和圆角图片格式的示例代码的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行