반응형
box-shadow
★ 요소에 그림자를 설정하는 속성. 주로 블록요소에 설정.
★ box-shadow: 수평수치 수직수치 흐림수치 번짐수치 색상 삽입효과
★ 흐림(blur) 수치 : 그림자 테두리가 흐려지는 수치
★ 번짐(spread) 수치 : 그림자 크기 설정 수치
link-button.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크 버튼</title>
<style type="text/css">
a:link, a:visited {
background-color: #333;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: gray;
}
a {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body style="background-color: yellow;">
<p>버튼 형태로 작성하는 링크</p>
<a href="#">연결</a>
</body>
</html>box-shadow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그림자</title>
<style type="text/css">
h1 {
width: 300px;
}
.c1 {
background-color: yellow;
border: 5px solid blue;
box-shadow: 10px 10px 5px teal;
}
.c2 {
background-color: orange;
border: 5px solid red;
box-shadow: 20px 20px 50px red;
}
.c3 {
background-color: silver;
border: 5px solid;
box-shadow: 20px 20px 30px -20px maroon;
}
.c4 {
background-color: lime;
border: 5px solid olive;
box-shadow: 10px 10px 10px 5px gray inset;
/* 기본값은 outset */
}
div {
width: 200px;
height: 50px;
line-height: 50px;
font-size: 15px;
text-align: center;
}
#d1 {
border: 1px solid rgba(102, 186, 255, 0.4);
box-shadow: 0px 0px 20px 20px rgba(102, 186, 255, 0.4);
}
#d2 {
border: 1px solid;
box-shadow: 10px 10px #bce55c,
20px 20px #cef279,
30px 30px #e4f7ba;
}
img {
padding: 25px;
padding-right: 50px;
margin: 20px;
box-shadow: 5px 5px 10px #000;
}
</style>
</head>
<body>
<h1 class="c1">박스 스타일링 1</h1>
<h1 class="c2">박스 스타일링 2</h1>
<h1 class="c3">박스 스타일링 3</h1>
<h1 class="c4">박스 스타일링 4</h1>
<hr><br><br>
<div id="d1">박스 그림자 특수 효과1</div>
<div id="d2">박스 그림자 특수 효과2</div><br><br>
<hr>
<img src="images/bg.jpg" width="300">
</body>
</html>
반응형
'Front-end > Css' 카테고리의 다른 글
| [CSS] 글자효과(color, text-align, text-decoration..) (0) | 2023.07.07 |
|---|---|
| [CSS] 높이, 너비 사이즈 (0) | 2023.07.07 |
| [CSS] 여백(margin, padding) (0) | 2023.07.06 |
| [CSS] 테투리(경계선) (0) | 2023.07.06 |
| [CSS] 배경 (0) | 2023.07.06 |
