欢迎使用优快云-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

转载最新推荐文章于 2021-01-07 23:01:28 发布 · 305 阅读

干货专栏收录该内容

1 篇文章

订阅专栏

本文通过简单的HTML和CSS代码展示了如何将相同的图片以圆形和方形带圆角的形式展示出来。通过对图片元素设置不同的边框半径，实现了视觉效果上的变化。

效果预览
代码展示：

<!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>`