css 头像边框

最新推荐文章于 2024-08-01 16:36:45 发布

原创最新推荐文章于 2024-08-01 16:36:45 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

UI设计专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了如何使用CSS创建一个具有阴影效果的圆形头像框，并将图片居中显示。通过设置宽度、高度、背景颜色、内边距、盒阴影、外边距、盒模型、边框半径等属性，实现了一个美观且响应式的头像样式。

css

<style>
    .head-img {width: 66px;height: 66px;background-color: #fff;padding: 3px;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);margin: 0 auto 10px;box-sizing: border-box;border-radius: 50%;}  
    .head-img img {display: block;width: 60px;height: 60px;border-radius: 50%;}
</style>

<div class="head-img">
    <img src="/photo.jpg">
</div>