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 相关文章推荐
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 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中的正规表达式(二)
2006/10/09 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
cookie的secure属性详解
2015/04/08 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python实现红包裂变算法
2016/02/16 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
2014年中秋寄语
2014/08/11 职场文书
小学生毕业评语
2014/12/26 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书