边界半径不适用于野生动物园

问题描述

所以我用拇指和周围的白色边框画了这个圆圈.一切都可以在每个浏览器中找到，除了野生动物园之外，它并没有呈现白色边框.那我该如何工作呢?

So I made this circle with thumb and a white border around. Everything works find in every browser except safari that doesn't render that white border as it should. How can I get this to work then?

示例 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);
}

推荐答案

使用此小提琴有效:

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

这篇关于边界半径不适用于野生动物园的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！