css-博客圆形头象的制作

最新推荐文章于 2022-04-09 11:25:52 发布

原创最新推荐文章于 2022-04-09 11:25:52 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML和CSS实现的圆角图片裁剪效果。通过设置外部盒子的宽高相等并应用圆角边框，再将超出部分隐藏，内部图片的宽高与外部盒子一致，达到美观的圆形图片展示效果。

效果示例

在这里插入图片描述

做法

外部盒子宽高相等

设置为圆角

超出部分隐藏

内部图片设置宽高与外部盒子一样

代码

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 100px;
            height: 100px;
            border-radius:50px;
            border: 1px solid red;
            overflow:hidden;
        }

        .c1 img{
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>
<div class="c1">
    <img src="http://n.sinaimg.cn/tech/5_img/upload/ad8784c4/107/w1024h683/20190808/f48c-iaxiufn6993627.jpg" alt="">
</div>
</body>
</html>