CSS 如何实现圆形头像? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
方法一: 直接使用 border-radius 属性设置 img
直接设置 img 为圆形, 这种情况下如果图片不是正方形, 图片会被拉伸
<img class="circleImg" src="../img/photo/img.jpg" />
相应的 CSS 为
- .circleImg{
- border-radius: 30px;
- width:60px;
- height:60px;
- }
boder-radius 为图片宽度的一半
方法二: 使用 border-radius 属性设置背景图
通过背景图设置
<div class="bgImg"></div>
相应的 CSS 为
- .bgImg{
- border-radius: 30px;
- width:60px;
- height:60px;
- background: url("../img/photo/img.jpg") no-repeat center;
- background-size:60px;
- }
拖图片不是方形, 则按照宽度等比例显示, 则 background-size 设置为图片宽度, 高度为 auto, 若需要按照高度等比例显示, 则 background-size:auto 60px;
显示效果为
border-radius 属性用于为元素添加圆角边框!
语法
border-radius: 1-4 length|% / 1-4 length|%;
注意: 每个半径的四个值的顺序是: 左上角, 右上角, 右下角, 左下角. 如果省略左下角, 右上角是相同的. 如果省略右下角, 左上角是相同的. 如果省略右上角, 左上角是相同的.
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17170.html