홈 > 웹사이트 구축 도구 > 프런트 엔드 기술
웹 디자인, 그림에 음영을 추가 디자인에 종종 그것을 아름 답게 하는 좋은 방법입니다. 포토샵 없이 어떻게 할 당신이 그림자를 추가할 CSS로 그림? 여기에 매우 간단한 방법이입니다.
이 효과 달성 하는 방법? 그것은 정말 간단 합니다, 그리고 여기에 모든 코드:
< html >
< 헤드 >
< 스타일 형식을 "Text/css" = >
그림 없음
국경-가기: 1px 고체 #dcd7c8;
국경-왼쪽: 1px 고체 #dcd7c8;
국경-오른쪽: 1px 고체 #dcd7c8;
padding: 5px 5px 9px 5px;
배경: url (shad_bottom.png) 반복 x 하단 왼쪽;
}
</스타일 >
</헤드 >
< 몸 >
< img src = "flower.jpg" alt = "꽃" / >
</바디 >
< / html >
위쪽, 왼쪽, 및 그림의 오른쪽에 3 개의 테두리를 추가 하는 세 가지는 IMG 태그의 속성 그리고 테두리 색 진짜 그림자는 실제 그림자 처럼 보이는 가장 가까운 색을 해야 한다. Padding 속성 단풍 사진 주위 공간, 그림의 아래 부분 때문에 낮은 그림자 효과 수평 타일 결과에 실제로 4px 그림 정해 9px 공간, 그래서 배경 이미지 4px 공간 마이너스의 배경 이미지의 추가 촉진 하기 위하여 공간 9px 나뭇잎 그림 주위 공간 같은 데. 이 같은 사실은 배경 그림의 하단에 확대/축소:
물론,이 방법의 그림자는 단순히 그림자 효과, 그리고 그림자 그라데이션 효과가 없습니다 하지만 우리의 일반적인 웹 디자인 됩니다. 여기에는 더 복잡 한 CSS로, 그림에 그림자 그것을 참조 하는 경우 더 복잡 한 그림자 효과 추가 하는 방법에 대 한 영어 문서.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
