如果画圆角图片效果
<li> <a href="http://smashingconf.com/speakers/lea-verou"> <img src="http://smashingconf.com/content/02-speakers/00-lea-verou/lea-verou.jpg" width="195" height="195" alt="如其画圆角图片效果"> <span name="code">.speakers-grid li a { position: relative; display: block;}

?

? ?li:

?

.image-grid li {  position: relative;  float: left;  list-style: none;  margin: 0 2% 2% 0;  width: 23%;  line-height: 0;}

??

?

?

?

?

? ?img:

?

直接是img用border-radius:50%当然img也有border:10px solid #e6f4fd;

.image-grid img {   width: 100%;   height: auto;   border-radius: 50%;   border: 10px solid #e6f4fd;   -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;   -o-box-sizing: border-box;   -ms-box-sizing: border-box;   box-sizing: border-box;   -moz-transition: border ease .3s;   -webkit-transition: border ease .3s;   -o-transition: border ease .3s;   transition: border ease .3s;}

?

?

?