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

前端  /  管理员 发布于 7年前   213

　　一、图片实现圆形条件

　　原本不是圆形图片，通过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="https:/css/images/style.css" rel="stylesheet" type="text/css" />
　　<!-- https:///-->
　　</head>
　　<body>
　　<div id="divcss5"><img src="https:/css/images/1.jpg" /></div>
　　</body>
　　</html>

　　2、对应CSS代码：


复制代码代码如下:　　#divcss5{ margin:10px auto}
　　#divcss5 img{ border-radius:50%}

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

　　3、浏览器效果截图

　　


  • 上一条：
    css(html)背景图优化合并技巧详解
    下一条：
    DIV+CSS中让布局、背景图片、文字内容居中的方法

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客