css
9장 예제- 그러데이션을 사용해 패턴 만들기
쥬크버그
2023. 3. 31. 00:29
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그러데이션을 사용해 패턴 만들기 </title>
<style>
div {
width:500px;
height:300px;
border:1px solid #222;
border-radius:10px;
margin-bottom:30px;
}
.grad1{
background:red;
background:repeating-linear-gradient(yellow,yellow 20px,red 20px,red 40px);
}
.grad2{
background:#ccc;
background:repeating-radial-gradient(circle,white,white 10%,#ccc 10%,#ccc 20%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</section>
</html>