① box-shadow : 선택한 요소에 그림자 효과를 만들어주는 속성이다
| 문법 | 설명 |
| none | 그림자 효과를 없앤다 |
| x-position | (필수) 가로 위치 |
| y-position | (필수) 세로 위치 |
| blur | 그림자를 흐리게 만든다 값이 클 수록 더 흐려진다 |
| spread | 양수일 경우, 그림자를 확장하고 음수인 경우 축소한다 |
| color | 그림자의 색상을 정한다 |
| inset | 그림자를 요소의 안쪽에 만든다 |
| initial | 기본값으로 설정한다 |
| inherit | 부모 요소의 속성값을 상속받는다 |
+) 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style>
/* .box1 {
background-color: skyblue;
width: 300px;
height: 200px;
text-align: center; */
/* x축 y축 흐림 퍼짐 색상 */
/* box-shadow: 10px 10px 10px 3px #666,
17px 17px 10px 3px #555,
25px 25px 10px 3px #444,
10px 10px 10px 3px #333;
} */
a {
text-decoration: none;
color: inherit;
border-radius: 20px;
}
a:hover {
display: block;
color: #fff;
background-color: #000;
}
.box1 {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
background-color: #565656;
color: #333;
font-size: 70px;
text-shadow: 0 -1px #000, 0 1px #777;;
font-weight: bold;
box-shadow: 10px 10px 5px 5px #666;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="box1">
<a href="#">
shadow
</a>
</div>
</body>
</html>
+) 결과
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_29] line-height / text-align 에 대하여 (0) | 2021.03.10 |
|---|---|
| [코딩 공부_28] reset.css (0) | 2021.03.10 |
| [코딩 공부_25] box-sizing 하기! (0) | 2021.03.09 |
| [코딩 공부_24] CSS Selector, 가상 셀렉터 (0) | 2021.03.09 |
| [코딩 공부_23] CSS, 복합 셀렉터에 대해 알아보자 (0) | 2021.03.08 |
댓글