상자 그림자를 아래쪽에서 제거하십시오.

Question

상자 그림자를 넣지 않으려면 CSS를 어떻게 변경해야합니까?

저는 이것을 사용하고 있습니다 만, 섹션 사이의 하단에 그림자가있는 <sections>이 있습니다. 나는 그것을 원하지 않는다. 그래서 나는 바닥면에서만 그림자를 제거하고 싶다.

현재 CSS는 다음과 같습니다

-webkit-box-shadow: 0 5px 19px 2px rgba(0,0,0,0.1); 
-moz-box-shadow: 0 5px 19px 2px rgba(0,0,0,0.1); 
    box-shadow: 0 5px 19px 2px rgba(0,0,0,0.1); 

Answer 1

은 (오버플로 : 숨겨진) : (그림자와 함께)를 innerbox와 outerbox를 사용

<div style="height: 30px; width: 30px; overflow: hidden; padding: 10px 10px 0 10px;"> 
    <div style="height: 30px; width: 30px; box-shadow: 0 5px 19px 2px #000;"> 
    </div> 
</div> 

http://jsfiddle.net/wQA8D/ (인라인 CSS 죄송합니다)

Answer 2

상자 그림자는 요소의 전체 경계를 기반으로 생성되므로 불가능합니다. 그림자를 계산하지 않으려는 경계를 선택할 수 없습니다. y 축에 음수 오프셋을 기꺼이 설정합니다.

box-shadow: 0 -19px 19px 2px rgba(0, 0, 0, 0.1); 

그러나 그림자가 맨 위에 크게 표시됩니다. 또 다른 방법은 의사 요소와 바닥에 그림자를 모호하게하는 것입니다,하지만 몇 가지 문제를 제시한다

귀하의 배경 (불일치 할 패턴)
1. 그림자 것 고체, 균일 한 색상이어야 할 것이다
2. 하단에서 갑자기 끝납니다.

이 수정 사항의 CSS는 다음과 같을 것입니다 (섀도우 흐림 크기를 변경하는 경우 픽셀 값을 조정해야 할 수도 있음).

div:after { 
    background-color: #fff; 
    height: 20px; 
    content: ""; 
    position: absolute; 
    bottom: -20px; 
    left: -20px; 
    right: -20px; 
} 

http://jsfiddle.net/teddyrised/63hhp/