Safari에서 'border-radius'를 사용할 때 내 이미지가 잘리는 이유는 무엇입니까?

Safari 둥근 모서리 문제

border-radius를 사용하여 이미지에 둥근 모서리를 만들면 Safari에서 비정상적인 동작이 나타날 수 있습니다. 이는 브라우저의 렌더링 엔진이 둥근 모서리를 계산할 때 이미지와 주변 테두리를 모두 고려하여 원치 않는 자르기가 발생하기 때문입니다.

문제 이해

100px x 100px의 이미지를 사용하여 문제를 설명합니다. 3px 테두리를 추가하면 요소 크기가 106px x 106px로 늘어납니다. 이제 테두리 반경 20%를 적용하면 이미지 자체가 아닌 요소의 외부 경계에서 모서리가 잘립니다.

해결책: 이미지와 테두리 분리

Safari에서 이 문제를 해결하려면 이미지와 테두리의 모서리가 모두 둥글게 되어 있는지 확인해야 합니다. 이를 달성하는 한 가지 방법은 컨테이너 요소를 사용하여 이미지에서 테두리를 분리하고 컨테이너와 이미지 모두에 border-radius를 적용하는 것입니다.

예

< ;div>

CSS:

.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에서 'border-radius'를 사용할 때 내 이미지가 잘리는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!