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


Posted in HTML / CSS onOctober 10, 2014

一、图片实现圆形条件

原本不是圆形图片,通过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://3water.com/-->

</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、浏览器效果截图

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

HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 #HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 #HTML / CSS
css3 transform属性详解
Sep 30 #HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 #HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 #HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 #HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 #HTML / CSS
You might like
php 获取本机外网/公网IP的代码
2010/05/09 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
JS实现的对象去重功能示例
2019/06/04 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
详解python 发送邮件实例代码
2016/12/22 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
详解Python中类的定义与使用
2017/04/11 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python 常用的基础函数
2018/07/10 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
JAVA和C++的区别
2013/10/06 面试题
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
教师个人剖析材料
2014/02/05 职场文书
个性车贴标语
2014/06/24 职场文书
班级体育活动总结
2014/07/05 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
《法国号》教学反思
2016/02/22 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android