php如何让img显示为圆形,css如何将图片设置为圆形图片

css将图片设置为圆形图片的方法:可以利用border-radius属性来设置圆形图片,代码如【border-radius:50%】。border-radius属性允许我们为元素添加圆角边框。

bb31b558f3f17f2712c449892ca1f909.png

本文操作环境:windows10系统、css 3、thinkpad t480电脑。

属性介绍:

border-radius 属性允许我们为元素添加圆角边框。

语法:border-radius: 1-4 length|% / 1-4 length|%;

注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

属性值:length 定义弯道的形状。

% 使用%定义角落的形状。

具体实现代码如下:

(学习视频分享:css视频教程)style{

.circle{

width:120px;

height:120px;

border-radius:50%;

overflow:hidden;

}

.circle > img{

width: 100%;

height: 100%;

}

}

正方形的原始图片

相关推荐:CSS教程

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值