html中设置圆形头像这里的css分别表示了啥 <html> <head> <title>圆形头像

Posted 2023-04-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中设置圆形头像这里的css分别表示了啥 <html> <head> <title>圆形头像相关的知识，希望对你有一定的参考价值。

html中设置圆形头像这里的css分别表示了什么
<html>
<head>
<title>圆形头像的制作</title>

<style type="text/css">
.imgtestmargin: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 imgwidth:100%;
min-height:100%; text-align:center;
</style>
</head>
<body >

<div class="imgtest">

<figure>

<div>
<img src="head.jpg" />
</div>
</figure>
</div>

</body>
</html>

.imgtestmargin: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 imgwidth:100%;/*设置图片相对于父级div的宽度*/
min-height:100%; text-align:center;/*最小高度，和居中对齐样式*/

具体如果不明白可以看一下菜鸟教程，很不错的参考技术A .imgtestmargin: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 imgwidth:100%; 宽度百分之百
min-height:100%; 最小高度百分之百
text-align:center; 文本水平居中
本回答被提问者采纳