css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
一、图片实现圆形条件
原本不是圆形图片,通过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://www.jb51.net/-->
</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新增的背景属性
CSS3新增属性:background-clip ,background-origin , background-size,本文给大家分享CSS3新增的背景属性...
[阅读全文]
-
-
-
CSS3 旋转立方体问题详解
这篇文章主要介绍了CSS3 旋转立方体问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
Grid 宫格常用布局的实现
这篇文章主要介绍了Grid 宫格常用布局的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
-
-
CSS3实现网站商品展示效果图
这篇文章主要介绍了CSS3实现网站商品展示效果图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习...
[阅读全文]
-
网友评论