css3图片圆形显示如何CSS将正方形图片显示为圆形图片布局_设置图片显示圆形 - CSDN文库

115 浏览量更新于2023-05-04 评论收藏 44KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

css3 图片圆形显示图片圆形显示如何如何CSS将正方形图片显示为圆形图片布将正方形图片显示为圆形图片布

局局

　　一、图片实现圆形条件一、图片实现圆形条件

　　原本不是圆形图片，通过CSS样式布局实现成圆形图片，首先图片必须为正方形。

　　二、使用布局技术二、使用布局技术

　　使用CSS3 圆角技术实现。

　　使用CSS3样式单词：border-radius

　　语法：

　　div{border-radius:5px}

　　对图片设置圆角样式：

　　.abc img{border-radius:5px}

　　设置class=”abc”对象图片四个角圆角为5px

　　三、三、CSS圆角实现图片圆形实例圆角实现图片圆形实例

　　首先一张正方形图片，放入一个DIV盒子内，通过对盒子内图片设置border-radius:50%实现圆形效果。

　　本案例在DIVCSS5初始化模板基础上完成。

　　1、、HTML源代码完整代码：源代码完整代码：

复制代码代码如下:　　<!DOCTYPE html>

　　<html>

　　<head>

　　<meta charset=”utf-8″ />

　　<title>图片圆形布局在线演示 DIVCSS5</title>

　　<link href=”images/style.css” rel=”stylesheet” type=”text/css” />

　　<!– https://www.jb51.net/–>

　　</head>

　　<body>

　　<div id=”divcss5″><img src=”images/1.jpg” /></div>

　　</body>

　　</html>

　　2、对应、对应CSS代码：代码：

复制代码代码如下:　　#divcss5{ margin:10px auto}

　　#divcss5 img{ border-radius:50%}

　　命名盒子“id=divcss5”盒子居中，同时上下外间距为10px;，然后设置对象盒子里img图片圆角50%

　　3、浏览器效果截图、浏览器效果截图

　　

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38548817

粉丝: 3
资源: 917

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈