Chrome의 이미지에서 테두리 반경이 작동하지 않는 이유는 무엇입니까?

CSS 테두리 반경이 Webkit의 이미지에 적용되지 않음

Chrome을 사용하지만 다른 브라우저는 사용하지 않고 #screen 요소에 border-radius를 적용하는 데 문제가 있습니다. ? 이 문제는 Chrome의 이미지 자르기 처리 결함으로 인해 발생할 수 있습니다.

#screen 요소는 CSS를 사용하여 테두리 반경이 둥근 배경 이미지를 설정합니다.

#screen {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

그러나 Chrome에서는 이미지가 border-radius 속성의 영향을 받지 않는 것 같습니다.

해결 방법

이 버그를 해결하려면 다음과 같은 해결 방법을 사용할 수 있습니다.

.element-that-holds-pictures {
    perspective: 1px;
}

이미지가 포함된 상위 요소에 원근감을 적용하면 Chrome이 이미지 품질을 왜곡하지 않고 테두리 반경을 올바르게 적용하게 됩니다. 이 해결 방법은 불투명도:0.99와 같은 다른 대안과 달리 디스플레이에 영향을 주지 않습니다.

위 내용은 Chrome의 이미지에서 테두리 반경이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!