html中设置圆形头像这里的css分别表示了什么 <html> <head> <title>圆...
发布网友
发布时间：2022-04-23 00:59
共2个回答
热心网友
时间：2022-05-12 20:55
.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;}/*最小高度，和居中对齐样式*/
具体如果不明白可以看一下菜鸟教程，很不错的
热心网友
时间：2022-05-12 22:13
.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; 文本水平居中
}
