728x90
★ 그림자, Shadow
- 1. text-shadow : x y blur color;
- 2. box-shadow : x y blur color;
- x : 가로축 위치 | y : 세로축 위치 | blur : 퍼짐정도
- 사용 ex)
div:nth-child(1) {
text-shadow: 2px 2px 2px #999;
}
■ HTML 코드
<body>
<div class="item">빨강</div>
<div class="item">노랑</div>
<div class="item">파랑</div>
</body>
■ 다양한 사용 ex)
- ex1)
div:nth-child(2) {
border : 1px solid black;
width : 100px;
height: 100px;
margin: 20px;
box-shadow: 5px 5px 2px gray;
}
div:nth-child(2):hover {
box-shadow : 5px 5px 2px black;
}- 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 24 - border (0) | 2023.04.18 |
|---|---|
| CSS STEP 23 - Background (0) | 2023.04.18 |
| CSS STEP 21 - Selector 5 (0) | 2023.04.18 |
| CSS STEP 20 - Selector 4 (0) | 2023.04.18 |
| CSS STEP 19 - Selector 3 (0) | 2023.04.18 |
