• 회원가입
  • 로그인
  • 구글아이디로 로그인

[gradient] CSS - radial-gradient() 함수 ★ - 방사형 그레이디언트 배경이미지 (= 방사형 그라디언트 = 방사형 그래디언트)

목차
  1. radial-gradient () 예제 - 방사형 그레이디언트
  2. radial-gradient () 정의
  3. radial-gradient () 구문
  4. radial-gradient () 예제 - 여러 유형 설정값

 

radial-gradient () 예제 - 방사형 그레이디언트

[예제1] 비율 사용 X

 

<style>

div {

  height: 200px;

  width: 200px;

  background-image: radial-gradient(red, green, blue);

}

</style>

<div></div>

 

결과보기


[예제2] - 비율 사용 O

 

<style>

#hz {

    height: 150px;

    width: 200px;

    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 50%); /* 사파리 구버전 */

    background: -o-repeating-radial-gradient(red, yellow 10%, green 50%);  /* 오페라 구버전 */

    background: -moz-repeating-radial-gradient(red, yellow 10%, green 50%); /* 파이어폭스 구버전*/

    background: repeating-radial-gradient(red, yellow 10%, green 50%); /* 표준 */

}

</style>

 

<div id="hz"></div>

 

결과보기

 

radial-gradient () 정의

 

방사형 그레이디언트(= 그라디언트 = 그래디언트) 배경이미지 설정.

※ 외래어표기법 상, 그레이디언트가 맞음. 

 



1.
적어도 2개 이상의 색상 정의 필요.

2.
CSS3

 

3.

IE10 이상 최신 주요 브라우저 지원.

구 버전 브라우저 경우, 접두어 필요.

https://homzzang.com/b/css-126

 

4.

MDN radial-gradient() 예제 보기

 

 

radial-gradient () 구문

 

selector {background-image: radial-gradient(shape size at position, start-color, ..., last-color);}



[매개변수]

 

shape

그레이디언트 모양 

가능한 값 종류

ellipse (기본값)

circle

 

size

그레이디언트 크기. (※ 가능한 값 종류)

 

closest-side (가장 가까운 사이드)

 

farthest-side (가장 먼 사이드)

 

closest-corner (가장 가까운 코너)

 

farthest-corner (가장 먼 코너) - 기본값

※ 코너 = 구석

※ 사이드 = 모서리

 

position

그레이디언트 중심 위치 (※ 가능값 종류)

 

center 

중앙. (기본값)


at X% Y%

※ X는 왼쪽부터 시작
※ Y는 상단부터 시작

 

start-color, ..., last-color

변하는 색 종류 (최소 2개 이상 정의 필요)

필수. 컬러색상

선택. 컬러위치 (0 ~ 100 %로 표시 또는 경사축으로 표시)


 

radial-gradient () 예제 - 여러 유형 설정값

 

불규칙 간격

background-image: radial-gradient(red 5%, green 15%, blue 60%);

 

원형 모양

background-image: radial-gradient(circle, red, yellow, green);

 

가장 가까운 사이드 

background-image: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);

 

가장 먼 사이드

background-image: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);

 

가장 가까운 코너

background-image: radial-gradient(closest-corner at 60% 55%,blue,green,yellow,black);

 

가장 먼 코너 (기본값)

background-image: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,black);

 
반복
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
https://homzzang.com/b/css-274

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012