圆角图片

最新推荐文章于 2026-01-10 22:01:16 发布

原创最新推荐文章于 2026-01-10 22:01:16 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3

前端专栏收录该内容

2 篇文章

订阅专栏

我们用的图片一般都是方形的，如何造成圆形？原理就是用CSS3的属性，知识点如下：

一、DIV 圆角化，属性：border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;

预览：

点击打开链接

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div style="text-align: center;">
<img style="border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;" id='userInfo' alt="" width="70px" height="70px" src='http://shp.qpic.cn/bizmp/4bicyswBBKE2CKDBicu5GWMWHWjorC8pseIgkxtxhfsxfxx6kGtIicZPw/'>
</div>
</body>
</html>