전체 너비 요소에 짝수 음영 만들기

Question

상자 그림자가 요소에 적용되면 양면에 그림자가 없기 때문에 모서리가 가운데보다 덜 두껍습니다. 이것은 전체 너비 요소에 이상한 효과를 만듭니다. 그 예를 보면

http://jsfiddle.net/kevincox/6FhYe/18/

당신은 가장자리가 가벼운 것을 볼 수 있습니다. "배너"가 페이지 상단에 있으면이를 펼치고 위로 이동시킬 수 있지만 상단을 볼 수 있으므로 페이지 중간에 작동하지 않습니다.

아무도 이미지가없고 선호 브라우저가 아닌 브라우저가 있지만 벤더 프리픽스를 조금이라도 다룰 수 있는지 궁금합니다. 별도의 수평 및 수직 스트레치 같은 것이 있습니까?

Answer 1

한 트릭. try changing the CSS에, 예를 들어 your jsFiddle 사용 :

 
h1 { 
    margin: 20px -20px; 
    padding: 10px 30px; 
    background-color: #AFA; 
    box-shadow: 0 0 10px black; 
} 

Answer 2

는

1. 그림자의 오프셋 (offset)의 수평, 긍정적 인 그림자가 상자의 오른쪽에있을 것입니다 의미 다음과 그림자에서이 업데이트 jsfiddle

   각 숫자를 살펴 나타냅니다 받아 음수 오프셋은 음영을 왼쪽에 놓습니다.

2. 음영의 수직 오프셋은 상자 그림자가 상자 위에 있음을 의미하고, 양수 값은 그림자 이 상자 아래에 있음을 의미합니다.
3. 흐림 반경 (선택 사항), 0으로 설정하면 그림자가 날카 롭습니다. 숫자가 클수록 더 흐리게 나타납니다.
4. 확산 반경 (선택 사항), 양수 값은 음영 값 인 의 크기를 증가시키고 음수 값은 크기를 감소시킵니다. 기본값은 0입니다 ( 그림자는 블러와 크기가 같습니다).
5. 색상의 끝 페이지 외부 확장되도록 요소에 부정적인 수평 여백을 설정하고 보상 할 수있는 패딩을 조정되어 작동하는 것 같다

Answer 3

국경 반경을 적용하면이 문제를 해결합니다 (그러나 분명히 당신이 원하는 여부에 따라 설계에서 해당).

h1 { 
    margin: 10px; 
    padding: 10px; 
    border-radius: 10px; 
    background-color: #AFA; 
    box-shadow: 1px 0 10px black; 
}