CSS:상자 그림자의 투명도를 설정하는 방법은 무엇입니까?

오늘 나는 box-shadow 속성을 사용하면 p에 그림자 효과를 아주 잘 추가할 수 있다는 것을 발견했습니다. 그러나 추가된 효과가 다음과 같다면:

-moz-box-shadow:0 4px 4px #999; 
-webkit-box-shadow:0 4px 4px #999; 
box-shadow:0 4px 4px #999;

#을 사용하여 설정된 색상 세트에는 투명 효과가 없습니다. 이런 식으로 그림자의 색상을 설정합니다. 그림자가 떨어지는 위치가 흰색이 아니거나 동적이 아닌 경우(예: 슬라이드에 떨어지는 경우) 여러 색상의 그림이 회전합니다. 그런 다음 그림자 색상을 이렇게 설정하면 그림자 효과가 가짜처럼 보입니다!

해결책: 대신 rgba를 사용하세요.

-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);

여기에 설명하고 싶습니다:

ie6 및 ie7은 box-shadow 속성을 지원하면 안 됩니다.

다음을 사용할 수 있습니다. *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#888888"); 대신

표시되는 모든 브라우저에 내가 설정한 그림자가 필요하지 않기 때문입니다. 그래서 이 코드 줄을 추가하지 않았기 때문에 여기서 Color="#888888"의 색상을 rgba로 바꾸는 것이 가능한지 확인하지 않았습니다. 필요한 친구는 스스로 확인할 수 있습니다. 짜증 나는!

나의 원칙:

레이아웃 정렬 문제 등의 문제가 없는 한 호환성 수정은 하지 않습니다.

브라우저를 업그레이드하지 않는 소수의 골수팬에게는 중복된 코드 한 줄을 추가할 필요가 없습니다. 이전 버전의 브라우저를 사용하고 있기 때문에 눈에 보이는 효과는 분명 좋지 않습니다. 충분한.

오늘날에도 구 버전의 IE 브라우저가 많이 존재하는 이유는 프런트 엔드에 익숙하기 때문입니다!

위 내용은 CSS:상자 그림자의 투명도를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!