邊境半徑不適用於safari

Question

所以我用拇指和白色邊框做了這個圓圈。除Safari瀏覽器之外的所有瀏覽器都可以找到所有可以正常顯示的白色邊框。那我怎麼才能使這個工作？

例http://jsfiddle.net/vTBeC/2/

謝謝大家;）

HTML標記

<div class="author-thumb"><img class="circle-thumb" src="http://s11.postimg.org/gst5lw9pb/testimonial_1.jpg" alt="" width="80" height="80" /> </div> 

CSS標記

.author-thumb { 
    float: none; 
    position: absolute; 
    left: 50%; 
    top: -42px; 
    margin-left: -37px; 
    margin-top: 100px; 
    z-index: 1; 
} 
.author-thumb:after, .author-thumb:before { 
    top: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 
.author-thumb:after { 
    border-color: rgba(250, 250, 250, 0); 
    border-top-color: #fafafa; 
    border-width: 7px; 
    left: 50%; 
    margin-left: -7px; 
} 
.author-thumb:before { 
    border-color: rgba(222, 222, 222, 0); 
    border-top-color: #dedede; 
    border-width: 8px; 
    left: 50%; 
    margin-left: -8px; 
} 
.circle-thumb { 
    width: 75px; 
    height: 75px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    border: 3px solid #fff; 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); 
} 

Answer 1

使用此撥弄它的工作原理：

http://jsfiddle.net/vTBeC/4/

CSS：

.author-thumb { 
    padding: 4px; 
    width: 80px; 
    height: 80px; 
    background: white; 
    border-radius: 100%; 
    -moz-border-radius: 100%; 
    overflow: hidden; 
    display: inline-block; 
    border: solid 1px #ccc; 
    vertical-align: bottom;  
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); 
} 
.circle-thumb { 
    border-radius: 100%; 
    -moz-border-radius: 100%; 
}