Safari에서 내 원형 이미지가 잘린 것처럼 나타나는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Safari의 둥근 모서리(테두리 반경) 문제

Safari 사용자가 테두리를 사용하여 원형 이미지를 만들려고 할 때 특이한 동작이 발생할 수 있습니다. 반경 속성. 이 문제는 다른 브라우저와는 다른 테두리 반올림에 대한 Safari의 고유한 해석에서 비롯됩니다.

문제 설명:

요소에 테두리를 적용하면 Safari는 요소의 추가된 테두리 너비를 수용할 수 있는 크기입니다. 이 확장은 둥근 모서리 적용에도 영향을 미치므로 포함된 이미지가 아닌 요소의 외부 경계에서 잘립니다.

해결책:

극복하려면 이 문제에서는 이미지를 컨테이너 내에 배치하여 이미지에서 테두리를 분리하는 것이 중요합니다. 이렇게 하면 컨테이너와 이미지 모두에 테두리 반경을 적용하여 일관된 원형 모양을 유지할 수 있습니다.

코드 예:

<div class="activity_rounded"><img src="image.jpg" /></div>

.activity_rounded {
  display: inline-block;
  border-radius: 50%;
  border: 3px solid #fff;
}

.activity_rounded img {
  border-radius: 50%;
  vertical-align: middle;
}

이 기술을 사용하면 Safari에서 올바르게 표시되고 다양한 브라우저에서 균일성을 유지하는 원형 테두리가 있는 이미지를 만들 수 있습니다.

위 내용은 Safari에서 내 원형 이미지가 잘린 것처럼 나타나는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!