html5 学习--渐变的使用

来源：互联网发布：淘宝u站怎么申请编辑：程序博客网时间：2024/09/21 09:21

1.webkit渐变

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{            padding:0px;            margin:0 auto;        }        div{            width:100%;            height:40px;            padding:4px;            background:-webkit-gradient(linear,left top,right bottom,from(blue),to(red));            /*-webkit-background-origin: padding-box;*/            /*-webkit-background-clip: content-box;*/        }    </style></head><body>    <div></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        div{            width:400px;            height:200px;            padding:4px;            background:-webkit-gradient(radial,200 100,100,200 100,100,from(orange),to(white),color-stop(90%,white));        }    </style></head><body>    <div></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            width:400px;            height:200px;            border:solid 2px #fcf;            padding:4px;            background:            -webkit-gradient(radial,60 45,10,52 50,60,from(#a7d30c),to(rgba(1,159,98,0)),color-stop(90%,#019f62)),            -webkit-gradient(radial,105 105,20,112 120,80,from(#a7d30c),to(rgba(1,159,98,0)),color-stop(90%,#019f62)),            -webkit-gradient(radial,95 15,15,102 20,60,from(#a7d30c),to(rgba(1,159,98,0)),color-stop(90%,#019f62)),            -webkit-gradient(radial,300 100,30,300 100,100,from(#a7d30c),to(rgba(1,159,98,0)),color-stop(90%,#019f62));        }    </style></head><body>    <div></div></body></html>

2.Gecko渐变

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            width:400px;            height:200px;            border:solid 2px #fcf;            padding:4px;            background:-moz-linear-gradient(left,red,orange,yellow,green,blue,blue,indigo,violet);        }    </style></head><body>    <div></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            width:500px;            height:400px;            margin:0 auto;            padding:4px;            background:-moz-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1)),url(demo.jpg) no-repeat center;        }    </style></head><body>    <div></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            width:400px;            height:400px;            border:solid 2px #fcf;            padding:4px;            background:-moz-radial-gradient(red,white,orange);        }    </style></head><body>    <div></div></body></html>

0 0