CSS 색 그라데이션

Question

CSS로 어떻게 색조 그라디언트를 얻을 수 있었습니까? 중간 색상은 # 888888

상자 그림자 삽 입니 다행이 없습니다. 별로 보이지 않아.

Answer 1

사용 linear-gradient CSS 속성

.grad { 
    background-color: #F07575; /* fallback color if gradients are not supported */ 
    background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */ 
    background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */ 
    background-image:  -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/ 
    background-image:  -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
    background-image:   linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */ 
} 

Answer 2

당신은 상자 그림자보다 CSS3 방사형 그라디언트를 사용하는 것이 더 낫다. 질문은 ...

.gradient 
{ 
    background: #999999; /* Old browsers */ 
    background: -moz-radial-gradient(center, ellipse cover, #999999 0%, #808080 48%, #747474 100%); /* FF3.6+ */ 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#999999), color-stop(48%,#808080), color-stop(100%,#747474)); /* Chrome,Safari4+ */ 
    background: -webkit-radial-gradient(center, ellipse cover, #999999 0%,#808080 48%,#747474 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-radial-gradient(center, ellipse cover, #999999 0%,#808080 48%,#747474 100%); /* Opera 12+ */ 
    background: -ms-radial-gradient(center, ellipse cover, #999999 0%,#808080 48%,#747474 100%); /* IE10+ */ 
    background: radial-gradient(ellipse at center, #999999 0%,#808080 48%,#747474 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#747474',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 
} 

http://f.cl.ly/items/3M1O262X2T151Z3F1R3w/Screen%20Shot%202013-06-11%20at%2013.03.45.png