CSS3에서는 box-shadow와 border-radius를 이미지에 직접 사용하면 브라우저가 이를 제대로 렌더링할 수 없습니다. 하지만 해당 이미지를 배경 이미지로 사용하면 추가된 스타일 브라우저에서 잘 렌더링할 수 있습니다. 다양한 이미지 스타일 효과를 만들기 위해 상자 그림자, 테두리 반경 및 전환을 사용하는 방법을 소개하겠습니다.
문제
데모를 보면 이미지의 첫 번째 행에 대해 border-radius 및 inline box-shadow를 설정한 것을 알 수 있습니다. Firefox는 이미지의 테두리 반경을 렌더링하지만 인라인 상자 그림자는 렌더링하지 않습니다. 두 효과 모두 Chrome 및 Safari에서 렌더링되지 않습니다.
.normal img {
테두리: 단색 5px #000;
-webkit-border-radius: 20px;
-moz-border-radius:
border-radius: 20px; : 삽입 0 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 삽입 0 1px 5px rgba(0,0,0,.5)
box-shadow: 삽입 0 1px 5px rgba(0,0,0,.5);
}
firefox 효과
: chrome/safari
해결 방법
border-radius와 inline box-shadow가 제대로 작동하려면 이미지를 배경 이미지로 변환해야 합니다. .
동적 방법
이 작업을 동적으로 완료하려면 jquery를 사용하여 각 이미지에 배경 이미지 래퍼를 추가해야 합니다. 다음 js 코드는 각 이미지에 범위 패키지를 추가합니다. 범위의 배경 이미지 경로는 이미지의 경로입니다.
코드는 비교적 간단해서 따로 설명할 필요가 없을 것 같습니다. 확실하지 않은 경우 jquery API를 직접 확인할 수 있습니다.
출력
위 코드는 다음과 같은 결과를 출력합니다.
코드 복사
원 image
원형 이미지 효과를 얻기 위해 border-radius를 사용한다는 점을 추가하면 효과는 다음과 같습니다.
css: 코드 복사
border-radius: 50em;
}
카드 스타일
여러 개의 인라인 상자 그림자를 사용하는 카드 스타일 그림.
css: 코드 복사