CSS3 방사형 그라디언트 - 다른 간격의 색상 정지
방사형 그라디언트 - 다른 간격의 색상 정지
다음 예제는 색상 간격이 서로 다른 방사형 그래디언트를 보여줍니다.
예
#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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 2861 | |
| 2849 | |
| 2828 | |
| 2824 | |
| 2820 | |
| 2814 | |
| 2813 | |
| 2808 | |
| 2807 | |
| 2802 | |
| 2795 | |
| 2787 | |
| 2783 |
CSS
css가 충돌이 됬을때
4
|
| 2781 | |
| 2776 |
HTML
HTML5 자바스크립트 API
1
|
| 2771 | |
| 2757 |
반응형
각 해상도별 테스트.
8
|
| 2756 |
HTML
결제모듈과 구글웹사이트 번역 엘리먼트
|
| 2755 |
HTML
팁] 모바일에서 문자보내기
2
|
| 2754 |
반응형
짧고 굵은거
1
|
| 2748 | |
| 2739 | |
| 2736 | |
| 2734 | |
| 2731 | |
| 2730 |
HTML
팁]모바일에서 전화 걸기
1
|
| 2729 | |
| 2726 | |
| 2724 | |
| 2722 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기