正文
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+*/
}
