CSS 상자 그림자가 진정으로 투명하지 않습니까?

enter image description here CSS 상자 그림자가 진정으로 투명하지 않습니까?

이것은 8 개의 흰색 상자 섀도우의 스택으로 하단에는 파란색 배경 그라디언트가 있고 다른 곳에는 흰색 배경이 있습니다.

내 논리로 흰색 배경에 흰색 상자 그림자가 흰색이어야하지만 흰색 배경의 나머지 부분에서 흰색 div를 구분하는 회색 테두리가 분명히 있습니다. 이 생성하는 CSS는 다음과 같습니다 당연히

.content, .sidebar, .banner{ 
    background-color: white; 
    -webkit-box-shadow: 0px 0px 15px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
         0px 0px 30px white, 
}

, 적은 상자 그림자, 그것은 훨씬 덜 발음,하지만 여전히 아주 눈에 띄는 순수한 흰색 배경에 있습니다. 이것의 목적은 내가 흰 콘텐츠 영역은 블루 그라데이션에 충실하고자하지만,이 이미지

enter image description here

에 도시 된 바와 같이 부드럽게 흰색 빛 그림자 "청소"컨텐츠 영역 주변의 그라데이션의 영역과

이 이미지는 어도비 불꽃 놀이를 사용하여 만든 모형입니다. 흰색 글로우 섀도우가 흰색 배경에 완벽하게 보이고 하단 그라디언트에 매우 잘 맞습니다. 어떤 이유로 내 CSS 드롭 그림자 (지금까지 크롬에서만 테스트 됨)가 나쁘게 작동하는지 또는 내가 원하는 효과를 얻기 위해 사용할 수있는 다른 메커니즘이 무엇인지 생각해보십시오.

출처

2011-10-29 Li Haoyi

대신에 하나 개의 요소에 8 개의 다른 그림자를 사용하는 효과를 얻을 수있는 큰 크기의 그림자 확산 속성을 사용하여 당신이 원하는 :

box-shadow: 0px 0px 35px 20px #fff;

당신이 in this demonstration을 볼 수 있듯이, 당신은 하나의 그림자와 필요 네 번째 속성 20px을 사용하면 요소 가장자리에서 그림자를 더 멀리 펼쳐 부드러운 광선 효과를 낼 수 있습니다. 설정을 사용하여 원하는 것을 얻으십시오.

또한 스크린 샷의 효과를 더 잘 재현하려면 opacity: 0.5;을 사용하여 더 부드럽게 만들 수 있습니다. 데모보기.

도움이 되길 바랍니다. :)

출처

2011-10-29 10:07:34 Kyle

또는 rgba (255,255,255,0.5); 그림자에있는 색을 위해서 ... –

@Rich : 그 역시 :) – Kyle

그게 효과적이고, 내가 원하는 것을 어느 정도 할 수 있습니다. 그러나 흰색 그림자를 쌓아 올리는 것이 회색으로 변하는 이유는 무엇입니까? –

CSS 상자 그림자가 진정으로 투명하지 않습니까?

답변

관련 문제