html - Safari/iPhone 问题 - 图像轮廓通过半径边界出现

Question

有没有人见过这个？它只发生在 iPhone 上的 Safari 上。

问题:/image/ffqWz.jpg

工作:/image/z1bUB.png

HTML:

<div class="row">
    <div class="col-md-5">
        <div class="round-img round-img-left">
            <img src="assets/img/photo/person2-square.jpg"/>
        </div>
    </div>
    <div class="col-md-7 advisor-content advisor-content-left">
        <h3 class="heading2 heading-underline">
            Lorem Ipsum
        </h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis iaculis nisi. Duis sagittis id quam ac egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis iaculis nisi. Duis sagittis id quam ac egestas.
        </p>
    </div>
</div>

CSS:

.round-img img {
    height: 360px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 35px solid #343434;
}

谢谢。

Answer 1

css 属性 border 在与 border-radius 一起使用时会产生这个问题。我用来摆脱它的解决方案之一是使用“box-shadow”属性而不是“border”。干杯

.round-img img {
    height: 360px;
    width: 360px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 35px #000;
    -webkit-box-shadow: 0px 0px 0px 35px #000;
    -moz-box-shadow: 0px 0px 0px 35px #000;
    overflow: hidden;
    margin: 35px;
}