Question

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

问题：https://i.stack.imgur.com/ffqWz.jpg

工作：https://i.stack.imgur.com/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

与border-radius一起使用时，css属性边框会出现此问题。我用来摆脱它的解决方案之一是使用'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;
}

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

1 个答案: