CSS 상자 그림자 및 여백

블로그 게시물에 CSS box-shadow ~ <img>을 추가했습니다. img에는 max-width:100%이 설정되어 크기가 조정될 때 열을 채 웁니다.CSS 상자 그림자 및 여백

CSS 상자 모델의 테두리 밖에 상자 그림자 렌더링으로 인해 그림자가 여백으로 쏟아집니다. 섀도우가 열의 내부에 위치하도록 이미지에 약간의 여백을주고 싶습니다. 그러나 margin을 사용하면 imgs가 열보다 넓어집니다.

위와 같이 너비에 영향을주지 않고 그림자를 안에 넣는 좋은 방법이 있습니까? 다른 요소에 배치하는 생각은 있지만 그렇게하는 것은 수치 스럽습니다.

견고한 경계를 사용했다면 이것을 달성하기 위해 box-sizing:border-box;을 사용할 수 있었지만 box-shadow에 아무런 영향이 없었습니까?

2012-07-15 MachineElf

미래에는'calc (...) '를 사용할 수 있습니다 : https://developer.mozilla.org/en/CSS/-moz-calc – biziclop

Sweeet! img :-)의 실제 치수를 얻기위한 HTML 5 'naturalWidth' 및'naturalHeight' 값과 같은 파이프 라인에는 정말 멋진 요소가 있습니다. – MachineElf

최대 너비는 약 98 % 또는 하강입니까? 그 다음 그림자가 내부에 있어야합니까?

2012-07-15 09:38:40

그 생각은 좋지만 가능하면 픽셀 정밀도가 완벽 할 것입니다. – MachineElf

나는 다른 것을 생각할 수 없다. 다른 요소에 배치하면 더 많은 제어권을 얻을 수 있습니다. –

그림자가 백분율 크기 일 수 있습니까? – Inkbug

답변