所以我用拇指和周围的白色边框制作了这个圆圈。一切都在每个浏览器中都能找到，除了 safari，它不会按应有的方式呈现白色边框。那我怎样才能让它工作呢？

Ví dụ http://jsfiddle.net/vTBeC/2/

谢谢大家；)

HTML 标记

CSS 标记

.author-thumb {
    float: none;
    vị trí: tuyệt đối;
    trái: 50%;
    top: -42px;
    margin-left: -37px;
    margin-top: 100px;
    chỉ số z: 1;
}
.author-thumb:after, .author-thumb:before {
    top: 100%;
    border: solid transparent;
    nội dung: " ";
    chiều cao: 0;
    chiều rộng: 0;
    vị trí: tuyệt đối;
    sự kiện con trỏ: không có;
}
.author-thumb:after {
    border-color: rgba(250, 250, 250, 0);
    border-top-color: #fafafa;
    border-width: 7px;
    trái: 50%;
    margin-left: -7px;
}
.author-thumb:before {
    border-color: rgba(222, 222, 222, 0);
    border-top-color: #dedede;
    border-width: 8px;
    trái: 50%;
    lề trái: -8px;
}
.circle-thumb {
    width: 75px;
    height: 75px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    bán kính đường viền: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

câu trả lời hay nhất

使用这个 fiddle 就可以了:

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

CSS:

.author-thumb {
    padding: 4px;
    width: 80px;
    height: 80px;
    nền: màu trắng;
    bán kính đường viền: 100%;
    -moz-border-radius: 100%;
    tràn: ẩn;
    hiển thị: khối nội tuyến;
    border: solid 1px #ccc;
    vertical-align: bottom;    
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.circle-thumb {
    bán kính đường viền: 100%;
    -moz-border-radius: 100%;
}

关于safari - 边界半径不适用于 safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19067388/