css 头像外圈白_如何使用css实现一个圆形头像框

这篇文章主要介绍了关于如何使用css实现一个圆形头像框，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

1、方法一

直接设置img为圆形，这种情况下如果图片不是正方形，图片会被拉伸

相应的css为.circleImg{

border-radius: 30px;

width:60px;

height:60px;

}

boder-radius为图片宽度的一半

2、方法二

通过背景图设置

相应的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;

显示效果为

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

css 头像外圈白_如何使用css实现一个圆形头像框相关推荐

如何用Qt抠一个圆形头像出来
如题,如何使用Qt抠一个圆形头像出来? 先来看效果: 首先加载一张图片,显示一个透明圆形,圆形外半透明,滚动鼠标滚轮,圆形区域变大变小. 鼠标按下可以拖动图片移动,来选定要截取的图片位置,按下&quo ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
react css多个变量_如何使用CSS变量和React上下文创建主题引擎
react css多个变量 CSS variables are really cool. You can use them for a lot of things, like applying the ...
css左右布局代码_如何使用CSS位置来布局网站（带有示例代码）
css左右布局代码 Using CSS position to layout elements on your website can be hard to figure out. What's th ...
css绘制卡券优惠券_用纯css来实现一个优惠券
前言我们在平时的网页中,经常会见到这样的优惠券或者其他的券(特征就是会有反方向的圆角). 可能大部分前端人员为了简单,直接采用图片的方式,直接把整张图作为背景.其实这也没什么不好的,简单,方便,还没 ...
css hover变成手_如何用CSS设置连接鼠标在上面是变成手型
展开全部用CSS设置连接鼠标在上面变成手型的方法:只需要对需32313133353236313431303231363533e59b9ee7ad9431333365666238要设置鼠标指针的文字加 ...
wordpress头像被墙_如何在WordPress中更改用户头像的形状
wordpress头像被墙 Ever come across a site that has custom shapes for their user avatars or gravatars? Wa ...
html css js 实战案例_使用html+css+js实现弹球游戏
php中文网最新课程每日17点准时技术干货分享使用html+css+js实现弹球游戏代码如下,复制即可使用: <head> <style type="text/css ...
css打印适应纸张_使用原生css+js+html实现打印A4纸张的功能页面
有时候我们需要使用html+css实现打印A4纸张的功能页面,以下代码实现 A4打印页面 /*横向*/ .a4-endwise{ margin: 0 auto; width: 1070px; heig ...
纯css实现手风琴效果_创建纯CSS手风琴的4种方法
内容手风琴是一种有用的设计模式. 您可以将它们用于许多不同的事物:用于菜单,列表,图像,文章摘录,文本片段甚至视频那里的大多数手风琴都依赖JavaScript,主要是jQuery ,但是由于高级CS ...

css 头像外圈白_如何使用css实现一个圆形头像框

css 头像外圈白_如何使用css实现一个圆形头像框相关推荐

最新文章

热门文章