明辉站/网站教程/内容

css3里怎么显示圆形图片

网站教程2024-05-07 阅读
[摘要]很多朋友只清楚怎样显示图片,但是不知道怎样用CSS样式布局实现成圆形图片,那么今天就来教大家如何用CSS做出圆形图片的显示首先图片必须为正方形。使用布局技术使用CSS3 圆角技术实现。使用CSS3样式单词:border-radius语法:div{border-radius:5px}对图片设置圆角样...
很多朋友只清楚怎样显示图片,但是不知道怎样用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样式布局实现成圆形图片方法就是这么多了。更多精彩请关注php中文网其它相关文章!

相关阅读:

如何使用text-decoration


HTML里table标签的使用方法


css的网页边框代码

以上就是css3里怎么显示圆形图片的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

相关阅读