<!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>
'css' 카테고리의 다른 글
| 9장 마무리 문제 2 (0) | 2023.03.31 |
|---|---|
| 9장 마무리 문제 1 (0) | 2023.03.31 |
| 9장 실습1 (0) | 2023.03.30 |
| 9장 예제 - 배경 이미지 크기 조절하기 (0) | 2023.03.30 |
| 9장 예제 - 배경 이미지 배치하고 고정하기 (0) | 2023.03.30 |
