转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
转载 原文:http://www.divcss5.com/wenji/w732.shtml
原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。
二、使用布局技术 - TOP
使用CSS3 圆角技术实现。
使用CSS3样式单词:border-radius
语法:
- div{border-radius:5px}
对图片设置圆角样式:
- .abc img{border-radius:5px}
设置class=”abc”对象图片四个角圆角为5px
三、CSS圆角实现图片圆形实例 - TOP
首先一张正方形图片,放入一个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" />
- <!-- www.divcss5.com -->
- </head>
- <body>
- <div id="divcss5"><img src="data: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将正方形图片显示为圆形图片布局的更多相关文章
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- css奇特用法之 IMG添加背景图片配合显示--效果惊艳
IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...
- CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...
- CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
- 转载——CSS3 Object-fit和Object-position
在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题.往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码: img { max-width: 100%; heig ...
- 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- 转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解
目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
- css判断不同分辨率显示不同宽度布局实现自适应宽度
一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...
随机推荐
- 2017.9.17 HTML学习总结---table标签
接上: 2.1.3 HTML表单标签与表单设计 表单是用户与服务器交互的主要方法,用户在表单中输入数据,提交给服务器程序来处理. (1)表单的组成: 文本框(text),密码框(password), ...
- js中的变量提升(Hoisting)
<script> function test(){ console.log(a); console.log(foo()); var a=1; function foo(){ return ...
- 通过ip地址访问同一局域网下已经启动的angular项目
通常tomcat启动的项目同一局域网下我们都可以访问.angular启动的前台项目别人怎么访问,一直不懂,后来知道启动命令加个参数就行了 首先查看本机ip 第二步,启动命令里加上--host 本机ip ...
- xml解析之stax
博文引自:http://zangweiren.iteye.com/blog/647334 Java 6.0对XML支持的新特性有许多方面.比如StAX.针对XML-Web服务的Java架构(JAX-W ...
- 神经网络系列学习笔记(四)——神经网络之RNN学习笔记
不同于传统的FNNs(Feed-forward Neural Networks,前向反馈神经网络),RNNs引入了定向循环,能够处理那些输入之间前后关联的问题. RNNs的目的是用来处理序列数据. 具 ...
- (转)零基础学习 Hadoop 该如何下手?
推荐一些Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Amb ...
- 内置函数系列之 filter
filter 过滤 基本语法: s = filter(function,iterable) 将可迭代对象的每一个元素,传进函数中,根据函数中的判断条件,返回True或False 返回True的是保留的 ...
- PLC状态机编程第六篇-优化PLC程序生成
还记得第一篇博客中,我们在状态机中手写上升沿来处理有别于传统的一键启停程序,那个手写的上升沿就是优化手段.stateflow状态机是带事件的,事件本身支持上升沿和下降沿等事件,在这里,如果我们选择用事 ...
- Leetcode 337. 打家劫舍 III
题目链接 https://leetcode.com/problems/house-robber-iii/description/ 题目描述 在上次打劫完一条街道之后和一圈房屋后,小偷又发现了一个新的可 ...
- Leetcode 538. 把二叉搜索树转换为累加树
题目链接 https://leetcode.com/problems/convert-bst-to-greater-tree/description/ 题目描述 大于它的节点值之和. 例如: 输入: ...