如果画圆角图片效果
<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;}
?
?
?