Firefox에서 CSS3 상자 그림자 렌더링 문제가 발생했습니다.

firefox에서 박스 섀도우가 잘못 렌더링됩니다 (v49에서 확인 됨).Firefox에서 CSS3 상자 그림자 렌더링 문제가 발생했습니다.

CSS는 :

.block { 
    width: 90px; 
    height: 90px; 
    box-shadow: 0 0 0 1px #0084A3; 
    border-radius: 100%; 
}

은 비대칭 렌더링 창 높이에 의존한다. 여기에 fiddle이 있습니다. 창 크기를 수직으로 조정하고 상자 그림자에 어떤 현상이 발생하는지 확인하십시오. 다음과 같이 쉽게 달성 할 수 있습니다. invalid box-shadow rendering. 위쪽 그림자가 아래쪽 그림자보다 훨씬 넓음을 볼 수 있습니다.

Chrome 및 Safari가 올바르게 처리합니다.

도움이되는 아이디어가 있으면 고맙겠습니다.

출처

2016-09-22 Alexey.Z.

box-shadow: inset 0 0 0 1px #0084A3;을 사용하면 파이어 폭스와 크롬 브라우저에서 동일한 출력을 제공합니다.

출처

2016-09-22 05:31:50 San

위대한이 link. 정말 좋은 해결 방법 인 것 같습니다. 감사! –

시도해보십시오. -moz-box-shadow: 0 0 0 1px #0084A3; Firefox 용; 그림자의 2 종류가있다

출처

2016-09-22 05:52:02 Abid

'-moz-box-shadow'는 firefox에서 더 이상 지원하지 않습니다. –

산이 .. 잘하지만 그냥 자세한 내용입니다 1. 내부는 (삽입) 기본적으로 2. 외부 (기본값) CSS3 너무

, 그것은이다 inset property가 지정되어 있지 않은 경우는 외측의 그림자를 취합니다.

삽입 지정 (기본값)되지 않은 경우, 그림자 (상자는 내용 위에 제기 된 것처럼) 그림자로 가정

inset 키워드를 사용하면 그림자가 프레임 내부로 변경됩니다 (상자 안의 내용이 눌린 것처럼). 삽입 그림자는 테두리 안쪽 (배경이 투명 인 경우), 배경 위, 내용 아래에 그려집니다.

체크 자세한 내용

출처

2016-09-22 07:23:37

Firefox에서 CSS3 상자 그림자 렌더링 문제가 발생했습니다.

답변

관련 문제