CSS의 대각선 그래디언트

내가 본 그라디언트의 대부분은 수직 또는 수평입니다. CSS를 사용하여 대각선 그라디언트를 사용할 수 있습니까? 한 모서리에서 어둡게 시작하여 반대쪽 모서리에서 더 밝아지는 그라데이션을 갖고 싶습니다.CSS의 대각선 그래디언트

출처

2013-08-15 AndroidDev

background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ 
    background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=1); /* IE6-9 fallback on horizontal gradient */

http://jsfiddle.net/jrc72/show

출처

2013-08-15 05:14:38

예. http://www.colorzilla.com/gradient-editor/에는 대각선을 선택하는 옵션이 있습니다. 방향을 참조하십시오.

출처

2013-08-15 05:13:42 Jonathan

이 데모를 참조 http://jsfiddle.net/FQSdb/

또한 다양한 방향 옵션

을위한 http://www.colorzilla.com/gradient-editor/ 체크 아웃

출처

2013-08-15 05:16:39

CSS의 대각선 그래디언트

답변

관련 문제