728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow: 10px 5px 20px #ccc;
}
.grad1 {
background: radial-gradient(circle at 20% 20%, white, blue);
}
.grad2, .grad3{
width: 500px;
border: 1px solid #222;
border-radius: 10px;
}
.grad2 {
background: repeating-linear-gradient(yellow, red 100px);
background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
}
.grad3 {
background: repeating-radial-gradient(circle, white, #CCC 10%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
<div class="grad3"></div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| 가상선택자2 (0) | 2022.12.29 |
|---|---|
| 가상 선택자 (0) | 2022.12.29 |
| radial그라데이션 (0) | 2022.12.29 |
| linear그라데이션 (0) | 2022.12.29 |
| CSS 연습 (0) | 2022.12.29 |