首页 > 代码库 > 不定期更新的CSS样式设置

不定期更新的CSS样式设置

2024-09-07 01:33:04   213人阅读

头像图片的样式

　　技术分享

　　假设这是一个头像图片，假设展示头像的框为100*100的div，而图片尺寸为510*765，如何让图片显示成这样呢？

　　html结构很简单：

            <div class="img">
                <img src="../images/eye.jpg">
            </div>
            <h5>吉米</h5>

　　忽略那个h5，其实样式非常简单哦！

　　首先，父元素定固定宽高100*100（或者百分比），图片根据需求设置100*120（如果父元素百分比也用百分比）。

　　父元素设置overflow:hidden;border-radius:50%;

　　最后，注意到图片有一圈灰色吗？只是一个border而已。

　　父元素设置border:3px solid #999;

　　大功告成。

            >.img{
                  margin:0 auto;
                  width: 80px;
                  height: 80px;
                  overflow: hidden;
                  border-radius: 50%;
                  border:3px solid #999;
                  >img{
                        width: 80px;
                        height: 100px;
                  }

　　大概就是这样啦。

不定期更新的CSS样式设置


联系
我们