如果画圆角图片效果

 

    原效果在  http://smashingconf.com/

 

    主要的点：

 

 

<li>
      <a class="image-link" 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="Lea Verou">        <span class="caption">
          <span class="name">Lea Verou</span>
          <span class="talk">
            TBA          
          </span>
        </span>
      </a>
</li>

 

   a:

 

.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;
}