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}/*最小高度，和居中对齐样式*/
具体如果不明白可以看一下菜鸟教程，很不错的
用CSS将图片显示成圆角的效果图。 看到了吧，这就是用纯CSS实现的圆角化图片，为了能看到透明化的效果，我特意应用了一个背景图片，你可以下载本模型到你的电脑中，随意伸缩窗口的大小，看看外圆角是否是透明的。 有了这种效果，你再也不愁给每一张图片作圆角的工作，这种效果在一些图片类的演示页面中经常见到，特别适用那些图片比较多的列表中。怎么样，效果还可以吧! 好了，我们来看看它的实现机制吧! 实现原理： 这种效果其实就是我在第二章中变体实现，下面讲一讲主要的关键代码。 主要变化的还是背景图片的定位，只是这一次与第二章中的有些不同，这次需要考虑到下面的两个圆角的变化。 先看看上面两个圆角的实现： /*图片偏移定位--上面部分*/ .sharp b.b2{background-position:-4px top} .sharp b.b3{background-position:-2px -1px} .sharp b.b4{background-position:-1px -2px} 再看看下面两个圆角的样式设置，下面部分和上面部分是相互对应的。 /*图片偏移定位--下面部分*/ .sharp b.b7{background-position:-4px bottom} .sharp b.b6{background-position:-2px bottom} .sharp b.b5{background-position:-1px bottom} 不同的图片调用样式： /*颜色方案一,绿色风格----------------------------------------*/ /*边框色*/ .color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6, .color1 .b7,.color1 .content{border-color:#262626} .color1 .b1,.color1 .b8{background:#262626} /*图片路径*/ .color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) no-repeat} 前面两句共同构成边线框的颜色值，需要设置成同一个色值，后面的一句设置图片的调用路径。 三句话就搞定一种颜色方案了在我们的产品设计中，有些产品为什么使用圆形头像，而有些产品为什么使用方形头像，在这里，我将从四个方面给大家依次分析：第一：从感受与认知方面考虑
1.从人的心理来说，方形相对无趣，人更喜欢圆形。
2.大脑可较轻易的处理圆形内的信息，减少认知的压力。
3.相较于方形，圆形更柔性、有机、安全、顺眼、现代与友善，也更能与他人情感交流。
4.更有关注的感觉，例如想到望远镜或放大镜的视野。
5.大多照片的四周都是无意义的背景或信息，圆形可以将其切除。
6.通常拍照会把“人”摆在中心，而圆形中心到四周距离都一致，可让脸更突出。
7.方形的对角线比边缘还长，用户目光易延伸出去；圆形半径长皆一致，用户可花更少时间在理解内容，眼球也较不需要移动。
第二：从设计视觉角度考虑
1.视线在方形的焦点有5个（四个角+中心），而圆形只有一个（中心）
2.圆润的线条或角度，可让视线自然的追随与运动，不会像看到90度角而停顿下来。
3.在扫视的情况下，使用圆形可协助使用者辨识或区分是否为内容，因为内容通常会置于用方型容器，例如文字、照片或专辑等。
第三：从产品定位角度考虑
比如微博头像是圆形的、微信的头像是圆角方形的。源于对APP产品的深刻理解。
外圆内方，是一种做人的态度，外圆是一种手段，我们需要与他人连接，做事情就需要一种处事圆滑，八面玲珑一般能够在大场面混的很好的，内方呢，其实是我们自己做事做人内心的标尺，也就是我们自己的认知，是我们所认定的不会变的东西，目标，初心不变，变的是通向目标的方法，内方更多的是自己内心的操守，不为外界所变动的部分。
微博作为一个社交媒体，在信息洪流中，我们要做到圆融，才能更方便的与圈子融合，微信朋友圈作为熟人的社交场子，更多的是展示个性，释放自我，代表着的是自己的能能量。
第四：其他方面的因素决定
1.行动装置普及后，因圆形与手指按压在屏幕上的形状类似，而被广泛的使用。
2.其实人类早就有这样的应用，例如将人物应用于圆形硬币与圆形艺术画中。
3.只是一个设计的风潮，刚好流行到“圆形”这个周期。
4.很多准则或模板都只提供圆形版本。
5.现在的CSS3技术让圆角（圆形）轻易实现且各浏览器也几乎都有支持。
如下图，对比两种头像形式，我将阐述三个观点：
1:圆形头像能够更好地帮助用户聚焦到人脸。在前面的分析中也提到，手机拍摄的照片质量参差不齐。在这种现实情况下，圆形头像更有利于忽略照片的背景，提高头像的识别效率。
2:严格意义上讲左图并不能称之为头像，而更应该称之为照片。原因很简单，头像嘛，自然应该以展示“头”为主，而左图中头像只占画面二分之一不到的区域。从这个角度来说，显然右图更为合适。在选择照片作为头像时，如果是圆形，用户更愿意选择脸部的照片作为头像如果是方形，用户则相对更随意，通常是全身或是半身照。不信，你可以打开自己的微信，看看自己的好友头像。
3:日常生活中，我们看到的大多数相框都是方形的，圆形的相框较少，这是因为大多数照片都是方形的。因此，使用圆形的轮廓来表现头像，能够快速地和照片区分开来，更加突出。
