<html>
<head>
<title>圆形头像的制作</title>
<style type="text/css">
.imgtest{margin:10px 5px;
overflow:hidden;}
.list_ul figcaption p{
font-size:12px;
color:#aaa;
}
.imgtest figure div{
display:inline-block;
margin:5px auto;
max-width:200px;
height:200px;
<!-- border-radius:100px; 此行代码让图片变圆 -->
border:2px solid #fff;
overflow:hidden;
-webkit-box-shadow:0 0 3px #ccc;
box-shadow:0 0 3px #ccc;
}
.imgtest img{width:100%;
min-height:100%; text-align:center;}
</style>
</head>
<body >
<div class="imgtest">
<figure>
<div>
<img src="http://db.zsmy.cn:8088/upload/authPic/2016/7/19/14689086514144647" />
</div>
</figure>
</div>
</body>
</html>
相关文章
- HTML5期末大作业:个人网站设计——简单的个人图片网站模板html(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
- HTML+CSS+div 制作简单的登录界面 - 一缕半夏微光
- 制作一个简单的HTML个人网页——学爬虫先学要爬取什么
- html5 + css + js制作一个简单的表单
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
- 11个优秀的HTML5 & CSS3下拉菜单制作教程
- 简单的html+css页面制作
- HTML电子邮件格式的制作与发送
- 原生Js基于HTML5 FileReader&canvas制作的banner广告图片插件
- Html5实现头像上传和编辑,保存为Base64的图片过程