예제 4-20. box-shadow 프로퍼티로 박스 그림자 만들기
WEB/CSS3-CONCEPT 2017. 11. 4. 18:54 |box-shadow : h-shadow(필수) v-shadow(필수) blur-radius(선택) spread-radius(선택) color|none|inset(필수)
h-shadow, v-shadow : 원본 텍스트와 그림자 텍스트 사이의 수평/수직 거리(필수)
blur-radius : 흐릿한 그림자를 만드는 효과로 흐릿하게 번지는 길이(선택)
spread-radius : 그림자 크기(선택, 디폴트 0)
color : 그림자 색
none : 그림자 효과
inset : 음각 박스로 보이게 박스 상단 안쪽(왼쪽과 위쪽)에 그림자 형성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div에 박스 그림자 만들기</title> <style> .redBox { box-shadow : 10px 10px red; } .blurBox { box-shadow : 10px 10px 5px skyBlue; } .multiEffect { box-shadow : 2px 2px 2px black, 0 0 25px blue, 0 0 5px darkblue; } div { width : 150px; height : 70px; padding : 10px; border : 10px solid lightgray; background-image : url("media/spongebob.png"); background-size : 150px 100px; background-repeat : no-repeat; } </style> </head> <body> <h3>박스 그림자 만들기</h3> <hr> <div class="redBox">뚱이와 함께</div><br> <div class="blurBox">뚱이와 함께</div><br> <div class="multiEffect">뚱이와 함께</div> </body> </html> | cs |
'WEB > CSS3-CONCEPT' 카테고리의 다른 글
| 예제 5-9. CSS3 스타일을 응용하여 리스트로 메뉴 만들기 (0) | 2017.11.06 |
|---|---|
| 예제 4-21. 마우스 커서 제어, cursor (0) | 2017.11.04 |
| 예제 4-19. text-shadow 프로퍼티로 텍스트 그림자 만들기 (0) | 2017.11.04 |
| 예제 4-18. <div> 박스에 배경 꾸미기 (0) | 2017.11.04 |
| 예제 4-17. 이미지 테두리 만들기 (0) | 2017.11.04 |