CSS3 방사형 그라디언트 - 다른 간격의 색상 정지

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 1854 1854

방사형 그라디언트 - 다른 간격의 색상 정지

다음 예제는 색상 간격이 서로 다른 방사형 그래디언트를 보여줍니다.

예

#grad {

background: red; /* For browsers that do not support gradients */

background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */

background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */

background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */

background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */

}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 150px;

width: 200px;

background: red; /* For browsers that do not support gradients */

background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */

background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6 to 12.0 */

background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6 to 15 */

background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax (must be last) */

}

</style>

</head>

<body>

<h3>Radial Gradient - Differently Spaced Color Stops</h3>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
677	HTML	레이아웃이 비뚤합니다. [3]	바다로가자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3644
676	HTML	DIV의 justify 정렬 문제 [7]	byfun 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4966
675	HTML	CGF 사용 방법 (지운아빠님 보시면 참조되실 것 같아서. ㅎㅎ) [2]	cshop 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3398
674	HTML	메뉴하나 따라 만들어보고 있는데.. Css질문 [4]	there007 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3170
673	HTML	ssl 웹페이지 적용 질문 드립니다. [3]	으다다 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3643
672	HTML	ssl 웹페이지 적용 질문드립니다. [6]	으다다 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3653
671	HTML	고수님들 도움좀 부탁드립니다!	가우류 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2469
670	HTML	[접기 펴기]간단 소스 문의좀.. [2]	그거슨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4985
669	HTML	이런모양의 테이블을 만드는게 가능할까요? [9]	부엉빵 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4174
668	HTML	백그라운드 이미지+상단 백그라운드 적용 [2]	고냉이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3754
667	HTML	테이블간 간격 문제 때문에 질문 올립니다. [2]	jdjjun00 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4176
666	HTML	이미지 게시판 질문드려요	막걸링 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3004
665	HTML	모바일 퍼스트와 반응형 웹	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3166
664	HTML	프레임 문의 드려요 ^^;; [2]	뉴무림객 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2825
663	HTML	HTML5 스터디가 가능할까요?	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3891
662	HTML	반응형 웹 스타디 초안? [6]	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3680
661	HTML	opacity 질문입니다.!	로날듀우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3359
660	HTML	안녕하세요! border 옵션 질문드리겠습니다~! [7]	로날듀우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3455
659	HTML	td안에 input type해서 검색창만들기...조언좀..부탁드려요 [1]	인생이란 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	8594
658	HTML	TD안에 검색창만들려구하는데요.. 도와주세요~~	인생이란 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2644
657	HTML	td간격??글자간격..해결좀요 ㅠㅠ [2]	인생이란 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6008
656	HTML	php로 사이트 개발시 [3]	뭐냐씨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3048
655	HTML	모바일웹을 html5로 만들어도 되나요? [3]	ddokkani 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3169
654	HTML	html5 table summary [1]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4556
653	HTML	border 에 대하여... [질문] [3]	航海 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2653
652	HTML	html5 <td headers='header_id'> [3]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3465
651	HTML	플래시 태그를 잘 모르겠습니다 ㅠㅠ [2]	김우너석 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2440
650	HTML	제일 이해안되는 문제.. [25]	다평정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	4782
649	HTML	태그 문의드립니다... [6]	뉴무림객 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2742
648	HTML	image replacement vs black hat techniques [7]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3354