box-shadow : 그림자를 만드는 속성
형식) box-shadow: <수평거리> <수직거리> <흐림정도> <번짐정도> <색상>
* 수평거리 : 그림자의 수평거리(얼마나 떨어져 있는지).
양수값은 오른쪽, 음수값은 왼쪽에 그림자를 만듬.
* 수직거리 : 그림자의 수직거리(얼마나 떨어져 있는지).
양수값은 아랫쪽, 음수값은 위쪽에 그림자를 만듬.
* 흐림정도 : 그림자의 흐림 정도를 표현함. 기본 값은 해가 진 그림자를 표시. 값이 커질 수록 부드러운 그림자. 음수 사용 불가
* 번짐정도 : 그림자가 번지는 정도를 나타냄. 양수 값은 그림자가 모든 방향으로 퍼짐. 음수 값은 그림자가 모든 방향으로 축소됨.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.photo {
position:absolute;
left: 50px;
top: 20px;
}
.shadow {
position:absolute;
left: 450px;
top: 20px;
border-radius: 100px;
box-shadow: 50px 50px 50px orange;
}
</style>
</head>
<body>
<img class="photo" src="images/img.jpg" alt="튤립 이미지">
<img class="shadow" src="images/img.jpg" alt="튤립 이미지">
</body>
</html>
'Front > CSS' 카테고리의 다른 글
| [CSS3] 반응형 웹(Responsive Web) 기초 (0) | 2021.04.29 |
|---|---|
| [CSS3] 마우스를 올렸을 때 변화 넣기(마우스 오버/hover) (0) | 2021.04.22 |
| [CSS3] border선, 사각형 둥글게 만들기 (0) | 2021.04.22 |
| [CSS3] float 속성 (0) | 2021.04.22 |
| [CSS3] border 속성 (0) | 2021.04.22 |
