728x90
반응형
<!DOCTYPE html>
0<0html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height: 300px;
border-radius: 10px;
}
.grad1 {
/*
circle : 정원
ellipse : 기본값, 타원
*/
/* 원형으로, 중앙에서 부터 흰색, 보란색, 빨간색으로 퍼=져나가는 그라데이션 */
background: radial-gradient(circle, white, yellow, red);
}
.grad2 {
/* 그라데이션 중심에서 가장 가까운 측면에 닿을 때 까지 가로 30%, 세로 40%위치에 그라데이션을 만드세여 */
background: radial-gradient(circle closest-side at 30% 40%, white, yellow, green);
}
</style>
<0000/head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| 가상 선택자 (0) | 2022.12.29 |
|---|---|
| 그라데이션 응용 (0) | 2022.12.29 |
| linear그라데이션 (0) | 2022.12.29 |
| CSS 연습 (0) | 2022.12.29 |
| background예제 2 (0) | 2022.12.28 |