明辉手游网中心:是一个免费提供流行视频软件教程、在线学习分享的学习平台!

html与CSS如何完成圆形与圆角图片格式的示例代码

[摘要]效果展示实现代码<<!DOCTYPE html><html><head><title>JcMan</title><style type="text/css">.image1{ margin-top: ...


效果展示



实现代码

<<!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如何实现圆形和圆角图片格式的示例代码的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。