css3里怎么显示圆形图片_懂视

css3里怎么显示圆形图片

2020-11-27 15:27:56 责编:小采

点击下载本文 文档为doc格式

很多朋友只清楚怎样显示图片，但是不知道怎样用CSS样式布局实现成圆形图片，那么今天就来教大家如何用CSS做出圆形图片的显示

首先图片必须为正方形。

使用布局技术

使用CSS3 圆角技术实现。

使用CSS3样式单词：border-radius

语法：

div{border-radius:5px}

对图片设置圆角样式：

.abc img{border-radius:5px}

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

CSS圆角实现图片圆形实例

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

1、HTML源代码完整代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>图片圆形布局 在线演示</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
<div id="div"><img src="images/1.jpg" /></div> 
</body> 
</html>

2、对应CSS代码：

#div{ margin:10px auto} 
#div img{ border-radius:50%}

用CSS样式布局实现成圆形图片方法就是这么多了。更多精彩请关注Gxl网其它相关文章！

全部频道