방사형 그라디언트 - 다른 간격의 색상 정지
다음 예제는 색상 간격이 서로 다른 방사형 그래디언트를 보여줍니다.
예
#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>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 2952 |
HTML
zencoding
|
| 2951 | |
| 2950 |
HTML
html table 2
|
| 2949 |
HTML
HTML Table 1
|
| 2948 |
HTML
HTML 파일 경로
|
| 2947 |
HTML
HTML <script> 태그
|
| 2946 |
HTML
Iframe 구문
|
| 2945 |
HTML
html 하이퍼링크2
|
| 2944 |
HTML
html 하이퍼링크 1
|
| 2943 |
HTML
HTML comment 태그
|
| 2942 | |
| 2941 | |
| 2940 | |
| 2939 |
HTML
짧은 인용문을위한 HTML
|
| 2938 |
HTML
HTML 서식 예제
|
| 2937 |
HTML
HTML 서식 요소
|
| 2936 | |
| 2935 |
HTML
HTML 줄 바꿈
|
| 2934 | |
| 2933 |
HTML
Headings 에 중요성
|
| 2932 |
HTML
HTML 스타일 속성
|
| 2931 |
HTML
HTML <pre> 요소
|
| 2930 |
HTML
HTML 줄 바꿈
|
| 2929 | |
| 2928 |
CSS
CSS 코멘트 삽입
|
| 2927 |
CSS
CSS 기본 문법
|
| 2926 |
HTML
HTML addr
|
| 2925 |
HTML
HTML 서식 요소
|
| 2924 |
기타
디바이스별 해상도
|
| 2923 |
HTML
HTML 이미지 img 태그
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기