래퍼의 각면에 그림자를 적용하는 가장 좋은 방법은

매우 일반적인 디자인인데 전체 화면 배경 이미지가 있고 흰색 배경이있는 내용의 가운데 래퍼가있는 것 같습니다. 이 흰 포장지의 왼쪽과 오른쪽 가장자리에는 몇 픽셀 너비의 깔끔한 그림자가 있습니다. this site과 유사합니다.래퍼의 각면에 그림자를 적용하는 가장 좋은 방법은

이것을 달성하는 가장 좋은 방법은 무엇입니까? 배경 이미지 (그렇다면, 무엇을 어떻게?) 또는 테두리, 다른 뭔가? 어떤 도움을 주셔서 감사합니다.

편집 : IE7에서 지원해야합니다.

출처

2012-07-24 Francesca

google box-shadow u 답변을 얻을 것이다. – SVS

다시 IE7에 나는 이미지를 사용하는 것이 좋습니다 것입니다. 이미지가 상단/중앙에 정렬 된 본문 태그에 배치되고 Y 축에 반복됩니다. 이미지 자체는 높이가 1 픽셀이고 디자인에 필요한만큼 넓습니다. 포토샵에 능숙한 사람이라면 누구나 이것을 만들 수 있습니다.

출처

2012-07-24 10:34:15

고마워요, 제가 생각했던 방식입니다. 그러나 배경 이미지가 고정 폭이어야하므로 사이트가 반응 적이면 인생을 어렵게 만듭니다. 오 잘, 나는 IE3 대신에 필터/해킹으로 CSS3를 시도해 볼 수있다. IE가 이미 죽길 바랍니다! – Francesca

차가움. 모바일 화면과 같이 더 작은 장치에서 사이트를 볼 때 그다지 문제가되지는 않습니다. 미디어 쿼리를 통해 단순히 BG 이미지를 숨길 수 있습니다. 그림자는 사이트의 각면에 알맞은 너비 (흰 공백)가있는 큰 화면에서 잘 작동하지만 실제로는 아무런 너비 (공백)가없는 작은 화면에서 어느 쪽이든 괜찮은 것 같아요. 그것 :) –

CSS3 box-shadow 속성으로이 작업을 수행 할 수 있습니다.

#wrapper { 
    box-shadow: 0 0 10px #000; 
    border:1px solid #000; 
}

모든 현대적인 브라우저는이 기능을 지원하지만 IE < 9를 지원해야하는 경우, 당신은 이미지 또는 PIE 같은 외부 라이브러리를 사용해야합니다. 브라우저 호환성에 대한

더 많은 정보는 : 지원에 대한 http://caniuse.com/#search=box-shadow

출처

2012-07-24 10:11:31 Simone

IE7 및 FF3.0에서 다시 지원 될 예정입니까? – Francesca

아니요. FF는 3.5 이후부터 지원합니다 ('-moz-'접두어 사용) – Simone

래퍼의 각면에 그림자를 적용하는 가장 좋은 방법은

답변

관련 문제