转载  原文：http://www.divcss5.com/wenji/w732.shtml

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

二、使用布局技术   -   TOP

使用CSS3 圆角技术实现。

使用CSS3样式单词：border-radius

语法：

  1. div{border-radius:5px}

对图片设置圆角样式：

  1. .abc img{border-radius:5px}

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

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

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

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

1、HTML源代码完整代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>图片圆形布局 在线演示 DIVCSS5</title>
  6. <link href="images/style.css" rel="stylesheet" type="text/css" />
  7. <!-- www.divcss5.com -->
  8. </head>
  9. <body>
  10. <div id="divcss5"><img src="data:images/1.jpg" /></div>
  11. </body>
  12. </html>

2、对应CSS代码：

  1. #divcss5{ margin:10px auto}
  2. #divcss5 img{ border-radius:50%}

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

3、浏览器效果截图

转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局的更多相关文章

  1. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  2. css奇特用法之 IMG添加背景图片配合显示--效果惊艳

    IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...

  3. CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...

  4. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  5. 转载——CSS3 Object-fit和Object-position

    在响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题.往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码: img { max-width: 100%; heig ...

  6. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  7. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  8. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

  9. css判断不同分辨率显示不同宽度布局实现自适应宽度

    一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...

随机推荐

  1. 20145238-荆玉茗 《Java程序设计》第四次实验报告

    20145238<Java程序设计>第四次实验报告 实验四 Android环境搭建 实验内容 1.搭建Android环境 2.运行Android 3.修改代码,能输出学号 实验步骤 搭建A ...

  2. 100 numpy exercises

    100 numpy exercises A joint effort of the numpy community The goal is both to offer a quick referenc ...

  3. python 添加 threadpool

    操作系统: Ubuntu 10.04 python安装依赖的软件包: python 出现 ImportError: No module named ** 我这里出现了: ImportError: No ...

  4. 【转】javascript中not defined、undefined、null以及NaN的区别

    原文链接(点击跳转) 第一:not defined 演示代码:   <span style="font-size:12px;"><span style=" ...

  5. 实际案例告诉你为什么Oracle不建议使用varchar2来存时间数据

    问题现象2015年9月客户系统中一条高逻辑读的SQL语句,在业务高峰期执行频率较高,导致系统逻辑读居高不下,同时带高了系统CPU,SQL语句主体部分如下 SELECT /* ^^*/ COUNT(DI ...

  6. 【思维题 细节】loj#6042. 「雅礼集训 2017 Day7」跳蚤王国的宰相

    挂于±1的细节…… 题目描述 跳蚤王国爆发了一场动乱,国王在镇压动乱的同时,需要在跳蚤国地方钦定一个人来做宰相. 由于当时形势的复杂性,很多跳蚤都并不想去做一个傀儡宰相,带着宰相的帽子,最后还冒着被打 ...

  7. jstree 全部选中事件 select_all 使用

    select_all function of jstree not checked node for jstree-open branch of ajax-jstree 很尴尬啊,找了整个百度,360 ...

  8. springMVC-基本认识

    MVC设计模式 Controller Model View SpringMVC 1.  实现MVC设计模式的框架 2.  基于springIOC,是spring的一个子模块,不需要整合 核心组件 1. ...

  9. linux redis5.0 集群搭建

    一.下载 wget http://download.redis.io/releases/redis-5.0.0.tar.gz 二.解压.编译 #解押到 /usr/local/ 文件夹 tar -zxv ...

  10. B1091 N-自守数 （15分）

    B1091 N-自守数 (15分) 如果某个数 \(K\)的平方乘以\(N\) 以后,结果的末尾几位数等于 \(K\),那么就称这个数为"\(N\)-自守数".例如 \(3×92 ...