html中设置圆形头像这里的css分别表示了什么 <html> <head> <title>圆形头像
html中设置圆形头像这里的css分别表示了什么<html><head><title>圆形头像的制作</title><styletype="text/css">.imgt...
html中设置圆形头像这里的css分别表示了什么
<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> 展开
<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> 展开
2个回答
展开全部
.imgtest{margin:10px 5px; /*设置总的距离边距*/
overflow:hidden;}/*超出部分隐藏*/
.list_ul figcaption p{/*html代码中没有*/
font-size:12px;
color:#aaa;
}
.imgtest figure div{ /*设置图片外面包裹的样式*/
display:inline-block;/*设置行内块元素，可以设置宽高的，但是这个div又不会独占一行*/
margin:5px auto;/*设置外边距*/
width:100px; /*宽高一样设置成正方形*/
height:100px; /*宽高一样设置成正方形*/
border-radius:100px; /*设置圆角100px，设置边角为圆角*/
border:2px solid #fff; /*设置div边框宽度为2，solid实线，颜色为#fff白色*/
overflow:hidden;/*超出部分隐藏*/
-webkit-box-shadow:0 0 3px #ccc;/*设置阴影，兼容谷歌浏览器*/
box-shadow:0 0 3px #ccc;/*设置阴影*/
}
.imgtest img{width:100%;/*设置图片相对于父级div的宽度*/
min-height:100%; text-align:center;}/*最小高度，和居中对齐样式*/
具体如果不明白可以看一下菜鸟教程，很不错的
overflow:hidden;}/*超出部分隐藏*/
.list_ul figcaption p{/*html代码中没有*/
font-size:12px;
color:#aaa;
}
.imgtest figure div{ /*设置图片外面包裹的样式*/
display:inline-block;/*设置行内块元素，可以设置宽高的，但是这个div又不会独占一行*/
margin:5px auto;/*设置外边距*/
width:100px; /*宽高一样设置成正方形*/
height:100px; /*宽高一样设置成正方形*/
border-radius:100px; /*设置圆角100px，设置边角为圆角*/
border:2px solid #fff; /*设置div边框宽度为2，solid实线，颜色为#fff白色*/
overflow:hidden;/*超出部分隐藏*/
-webkit-box-shadow:0 0 3px #ccc;/*设置阴影，兼容谷歌浏览器*/
box-shadow:0 0 3px #ccc;/*设置阴影*/
}
.imgtest img{width:100%;/*设置图片相对于父级div的宽度*/
min-height:100%; text-align:center;}/*最小高度，和居中对齐样式*/
具体如果不明白可以看一下菜鸟教程，很不错的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.imgtest{margin:10px 5px; 边界值：上下为10 左右为5
overflow:hidden;} 溢出元素隐藏
.list_ul figcaption p{
font-size:12px; 字号12像素
color:#aaa; 字体颜色#aaa
}
.imgtest figure div{
display:inline-block; 元素设置为内联块级元素
margin:5px auto; 边界上下5像素 左右自动（居中）
width:100px; 宽度100
height:100px; 高度100
border-radius:100px; 圆角100（同时设置四个角）
border:2px solid #fff; 边框2像素 实线 颜色#fff
overflow:hidden; 溢出元素隐藏
-webkit-box-shadow:0 0 3px #ccc; 盒子投影 解决浏览器兼容
box-shadow:0 0 3px #ccc; 盒子投影 x轴偏移0 Y轴偏移0 模糊3像素 颜色#ccc
}
.imgtest img{width:100%; 宽度百分之百
min-height:100%; 最小高度百分之百
text-align:center; 文本水平居中
}
overflow:hidden;} 溢出元素隐藏
.list_ul figcaption p{
font-size:12px; 字号12像素
color:#aaa; 字体颜色#aaa
}
.imgtest figure div{
display:inline-block; 元素设置为内联块级元素
margin:5px auto; 边界上下5像素 左右自动（居中）
width:100px; 宽度100
height:100px; 高度100
border-radius:100px; 圆角100（同时设置四个角）
border:2px solid #fff; 边框2像素 实线 颜色#fff
overflow:hidden; 溢出元素隐藏
-webkit-box-shadow:0 0 3px #ccc; 盒子投影 解决浏览器兼容
box-shadow:0 0 3px #ccc; 盒子投影 x轴偏移0 Y轴偏移0 模糊3像素 颜色#ccc
}
.imgtest img{width:100%; 宽度百分之百
min-height:100%; 最小高度百分之百
text-align:center; 文本水平居中
}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
