html5设置圆形图片2种方法

最新推荐文章于 2024-04-17 19:41:14 发布

threadroc

最新推荐文章于 2024-04-17 19:41:14 发布

阅读量2.8w

点赞数 1

分类专栏： html

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.此方法适合正方形图片,如果是长方形会把图片压缩.

两个案例一样;

2.此方法适合大部分图片,会显示长方形图片的一部分,以圆形显示出来;

转自:http://blog.csdn.net/dingzongyinnihao/article/details/39295231

<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;
width:100px;
height:100px;
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="head.jpg" />
</div>
</figure>
</div>

</body>

</html>

/***设置图片铺满，适合手机，电脑等各个浏览器**/

[css]view plaincopy 
   
 #mobilebg{background: url('../image/open/one_bg.png') no-repeat; -moz-background-size: 100% 100%; background-size: 100% 100%; padding-left:50px;  padding-top:70px;}  

threadroc

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
html5设置圆形图片2种方法

1.此方法适合正方形图片,如果是长方形会把图片压缩.两个案例一样;2.此方法适合大部分图片,会显示长方形图片的一部分,以圆形显示出来;转自:http://blog.csdn.net/dingzongyinnihao/article/details/39295231 圆形头像的制作.imgtest{margin:10px 5px;
复制链接

扫一扫