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}/*最小高度，和居中对齐样式*/
具体如果不明白可以看一下菜鸟教程，很不错的
<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>
一、找到安装的PPT演示文稿，双击启动打开，新建一个空白的PPT演示文稿，拖动鼠标选中自带的两个占位符框，按delete键将其删除。
二、选择插入菜单，在插入菜单栏下面找到图片命令，单击插入图片命令，d出插入图片窗口，在插入图片窗口中找到并选中一张证件照片，选中将其插入到PPT幻灯片页上。
三、还是在插入菜单栏下，在插入菜单栏中找到形状命令，在形状中找到椭圆形状，单击该椭圆形状选中这个椭圆。
四、按住鼠标左键不送，结合Ctrl与shift连个辅助键，在幻灯片上绘制出一个大小合适的正圆出来，正圆的大小大概比证件照的头像大一点即可。
五、选中绘制的正圆，右键选择设置形状属性命令，打开设置形状属性窗口，在设置形状属性中找到形状的填充设置，选择无填充，这样正圆就只有边框线了。
六、先选中证件照图片，在按住Ctrl键选中正圆，打开格式菜单，在格式菜单栏中找到合并形状中的相交，单击应用，效果完成。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）