테스트 사이트 - 개발 중인 베타 버전입니다

CSS3 그라디언트 모양 설정

· 8년 전 · 2058

CSS3 그라디언트 모양 설정


shape 매개 변수는 모양을 정의합니다. 가치 원 또는 타원을 취할 수 있습니다. 기본값은 타원입니다.


다음 예제는 원형 모양의 방사형 그래디언트를 보여줍니다.


#grad {

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

  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */

  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */

  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */

  background: radial-gradient(circle, red, yellow, green); /* Standard syntax */

}


[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

    height: 150px;

    width: 200px;

    background: -webkit-radial-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */

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

    background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */

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

}


#grad2 {

    height: 150px;

    width: 200px;

    background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari 5.1 to 6.0 */

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

    background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */

    background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Radial Gradient - Shapes</h3>


<p><strong>Ellipse (this is default):</strong></p>

<div id="grad1"></div>


<p><strong>Circle:</strong></p>

<div id="grad2"></div>


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


</body>

</html>


 

댓글 작성

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

로그인하기

게시글 목록

번호 제목
2952
2951
2950
2949
2948
2947
2946
2945
2944
2943
2942
2941
2940
2939
2938
2937
2936
2935
2934
2933
2932
2931
2930
2929
2928
2927
2926
2925
2924
2923