border-radius出现在图像下方

Question

建立一个画廊和我的锚点周围的边界半径不会裁剪我的图像。我不明白为什么。

这是html

<div id="Portfolio_page">


<div id="portfolio_wrapper">

<a class="thumb" href="img/image-2.jpg" data-lightbox="image-1" title="My caption"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>

</div>

</div>

这是css

#portfolio_wrapper{

width:100%;
text-align:center;

}



 #portfolio_wrapper a {
 border-style:solid;
 border-radius:50%;
padding:2px;
text-decoration: none;
display:inline-block;
width: 150px;
height: 150px;
margin: 10px;
opacity: 1;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
 background-image:url('img/image-2.jpg');
 background-color:#cccccc;


}

#portfolio_wrapper a:hover {
opacity: .7;
-webkit-transform: scale(1.05,1.05);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.05,1.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}

我不知道还有什么要说的，但我必须提供更多细节才能发布这个问题。任何帮助将不胜感激。

Answer 1

尝试将overflow:hidden添加到您的主播：

Fiddle Demo

现在，border-radius （溢出的图像）的所有内容都将被隐藏。

Answer 2

集

overflow: hidden;

到锚css