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>