Safari에서 둥근 모서리가 올바르지 않은 이유는 무엇이며 어떻게 해결할 수 있습니까?

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

CSS를 사용하여 border-radius 속성으로 둥근 모서리를 만들 때 Safari에서 예상치 못한 문제가 발생할 수 있습니다. 이 문제는 이미지를 테두리가 있는 원으로 변환하려고 할 때 특히 분명합니다.

Safari에서 브라우저는 테두리가 아닌 테두리를 포함한 요소의 외부 경계를 기준으로 테두리 반경을 계산합니다. 이미지 자체입니다.

이를 설명하기 위해 테두리가 3px인 이미지(100px x 100px)를 생각해 보세요. 결과적으로 요소 크기는 106px x 106px. 이 요소에 20%의 테두리 반경을 추가하면 요소의 외부 가장자리에서 이미지가 잘리고 그 주위에 흰색 영역이 남습니다.

이 동작은 더 높은 테두리 반경 값(예: 50)에서 더욱 분명해집니다. %) 및 테두리 색상이 흰색으로 설정된 경우.

Safari에서 이 문제를 해결하려면 이미지와 컨테이너 모두에 border-radius를 적용해야 합니다. 요소:

<div class="activity_rounded">
  <img src="http://placehold.it/100" />
</div>

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

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

이렇게 분리하면 테두리 반경이 이미지와 주변 요소 모두에 올바르게 적용되어 Safari에서 이미지 주위에 원형 테두리가 생깁니다.

위 내용은 Safari에서 둥근 모서리가 올바르지 않은 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!