HTML 그림자 (추후에 정리할 예정..)

HTML

HTML 그림자 (추후에 정리할 예정..)

기련이 2020. 5. 15. 18:04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그림자 효과</title>
<style type="text/css">
.bs1{
	background-color: yellow;
	border: 5px solid blue;
	box-shadow: 10px 10px 0px teal;
}
.bs2 {
	background-color: orange;
	border: 5px solid red;
	box-shadow: 20px 20px 50px red;
}
.bs3 {
	background-color: silver;
	border: 5px solid black;
	box-shadow: 20px 20px 30px -20px maroon;
}
.bs4 {
	background-color: lime;
	border: 5px solid olive;
	box-shadow: 10px 10px 0px 10px fuchsia inset;
}
</style>
</head>
<body>
<h1 class="bs1">그림자 1</h1>
<h1 class="bs2">그림자 2</h1>
<h1 class="bs3">그림자 3</h1>
<h1 class="bs4">그림자 4</h1>
</body>
</html>

추후에 정리할 예정