css渐变实现
body{ width: 100%; height: 100%; overflow: hidden; } *{ margin: 0px; padding: 0px; font-size: 0px; } .example{ width: 100%; height: 100%; background: -moz-linear-gradient( top,#ccc,#000); background: -webkit-linear-gradient( top,#ccc,#cddc39); background: -o-linear-gradient(top,#ccc, #000); } #grad{ width: 150%; height: 150%; position: absolute; top: 0px; left: 0px;; background: -webkit-radial-gradient(rgba(255, 0, 0, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(rgba(255, 0, 0, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(rgba(255, 0, 0, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Firefox 3.6 - 15 */ background: radial-gradient(rgba(255, 0, 0, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* 标准的语法 */ } #grad2{ width: 170%; height: 150%; position: absolute; top: -50%; left: 20%; background: -webkit-radial-gradient(rgba(233, 30, 99, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(rgba(233, 30, 99, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(rgba(233, 30, 99, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Firefox 3.6 - 15 */ background: radial-gradient(rgba(233, 30, 99, 0.2) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* 标准的语法 */ } #grad3{ width: 170%; height: 170%; position: absolute; top: -50%; left: -70%; background: -webkit-radial-gradient(rgba(33, 150, 243, 0.4) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(rgba(33, 150, 243, 0.4) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(rgba(33, 150, 243, 0.4) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* Firefox 3.6 - 15 */ background: radial-gradient(rgba(33, 150, 243, 0.4) 2%, rgba(255, 0, 0, 0) 60%,rgba(255, 0, 0, 0) 80%); /* 标准的语法 */ }
线性渐变 (top)
.example { width: 150px; height: 80px; background: -moz-linear-gradient( top,#ccc,#000); /*Mozilla*/ background: -webkit-linear-gradient(top,#ccc,#000); /*new gradient for Webkit*/ background: -o-linear-gradient(top,#ccc, #000); /*Opera11*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/ }
线性渐变 (left)
.example { width: 150px; height: 80px; background: -moz-linear-gradient( left,#ccc,#000); /*Mozilla*/ background: -webkit-linear-gradient(left,#ccc,#000); /*new gradient for Webkit*/ background: -o-linear-gradient(left,#ccc, #000); /*Opera11*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/ }
线性渐变(100deg)
.example { width: 150px; height: 80px; background: -moz-linear-gradient( 100deg,#ccc,#000); /*Mozilla*/ background: -webkit-linear-gradient(100deg,#ccc,#000); /*new gradient for Webkit*/ background: -o-linear-gradient(100deg,#ccc, #000); /*Opera11*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/ }
线性渐变(left top)
.example { width: 150px; height: 80px; background: -moz-linear-gradient( left top,#ccc,#000); /*Mozilla*/ background: -webkit-linear-gradient(left top,#ccc,#000); /*new gradient for Webkit*/ background: -o-linear-gradient(left top,#ccc, #000); /*Opera11*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/ }