Rumah > hujung hadapan web > html tutorial > css3里怎么显示圆形图片

css3里怎么显示圆形图片

php中世界最好的语言
Lepaskan: 2017-11-22 16:23:27
asal
5425 orang telah melayarinya

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

首先图片必须为正方形。

使用布局技术

使用CSS3 圆角技术实现。

使用CSS3样式单词:border-radius

语法:

div{border-radius:5px}
Salin selepas log masuk

对图片设置圆角样式:

.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>
Salin selepas log masuk

2、对应CSS代码:

#div{ margin:10px auto} 
#div img{ border-radius:50%}
Salin selepas log masuk

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

相关阅读:

如何使用text-decoration


HTML里table标签的使用方法


css的网页边框代码

Atas ialah kandungan terperinci css3里怎么显示圆形图片. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan