css box-shadow 사용 방법
2022. 3. 25. 10:26
보통의 웹 사이트들은 디자인 부분에서 shadow를 많이 활용한다. border만을 사용할 수는 있지만 box-shadow css 속성을 같이 사용하게 되면 웹사이트가 훨씬 생동감 있게 보이게 되기 때문이다.
box-shadow의 사용 형식은 다음과 같다
box-shadow : /* offset-x | offset-y | blur-radius | spread-radius | color */;
실제 사용 예시를 알아보자
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.block{
margin-bottom: 30px;
width:50%;
border: 1px black solid;
}
#b1{
box-shadow: 10px 5px 5px red;
}
#b2{
box-shadow: 60px -16px teal;
}
#b3{
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
}
#b4{
box-shadow: inset 5em 1em gold;
}
#b5{
box-shadow: 3px 3px red, -1em 0 .4em olive;
}
</style>
</head>
<body>
<div>
<div class="container">
<div class="block" id="b1">1</div>
<div class="block" id="b2">2</div>
<div class="block" id="b3">3</div>
<div class="block" id="b4">4</div>
<div class="block" id="b5">5</div>
</div>
</div>
</body>
</html>
<결과>
'IT 족집게 > 개발' 카테고리의 다른 글
| ckeditor 5 bootstrap modal과 같이 쓸 시 pannel 안보이는 현상 (0) | 2022.03.27 |
|---|---|
| css Document Element 요소 크기를 유동적으로 조절하기 (0) | 2022.03.25 |
| Javascript insertBefore로 요소 전으로 순서 바꾸기 (0) | 2022.03.24 |
| css 글자 크기 부모 요소에 따라가게 설정 (0) | 2022.03.24 |
| css 부모 요소 우측 상단에 위치 고정하기 (0) | 2022.03.24 |