标签：
今天学了渐变才发现，真的不难就是方向多了，记的东西多了一丢丢。
<!DOCTYPE html> <html> <head> <title>首页</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Pragma" name="no-store" /> <meta http-equiv="Cache-Control" name="no-store" /> <meta http-equiv="window-target" content="_top" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta content="telephone=no" name="format-detection" /> <meta name="renderer" content="webkit"> <meta name="screen-orientation" content="portrait"> <meta name="full-screen" content="yes"> <meta name="x5-orientation" content="portrait"> <meta name="x5-fullscreen" content="true"> <meta name="msapplication-tap-highlight" content="no"> <link rel="stylesheet" href="css/template.css" /> <style> div{ width:100%; height:100px; } /*从orange向green渐变*/ /*从左向右渐变*/ .linear1{ background-image: linear-gradient(360deg,orange,green);background-image:-webkit-linear-gradient(360deg,orange,green);} .linear8{background-image: linear-gradient(0deg,orange,green);background-image:-webkit-linear-gradient(0deg,orange,green);} /*效果是从顶部向底部渐变*/ .linear2{background-image: linear-gradient(to bottom,orange,green);background-image:-webkit-linear-gradient(to bottom,orange,green);} .linear6{background-image: linear-gradient(270deg,orange,green);background-image:-webkit-linear-gradient(270deg,orange,green);} /*从右边向左边渐变*/ .linear3{background-image: linear-gradient(180deg,orange,green);background-image:-webkit-linear-gradient(180deg,orange,green);} .linear4{background-image: linear-gradient(-180deg,orange,green);background-image:-webkit-linear-gradient(-180deg,orange,green);} /*效果是从底部向顶部渐变*/ .linear5{background-image: linear-gradient(90deg,orange,green);background-image:-webkit-linear-gradient(90deg,orange,green);} .linear7{background-image: linear-gradient(-270deg,orange,green);background-image:-webkit-linear-gradient(-270deg,orange,green);} .linear9{background-image:linear-gradient(to top,orange,green);background-image:-webkit-linear-gradient(to top,orange,green);} /*从右下角向左上角线性渐变*/ .linear10{background-image: linear-gradient(to top left,#00cc66,#505050);background-image:-webkit-linear-gradient(to top left,#00cc66,#505050);} /*从左下角向右上角线性渐变*/ .linear11{background-image: linear-gradient(to top right,#00cc66,#505050);background-image:-webkit-linear-gradient(to top right,#00cc66,#505050);} /*从右上角向左下角线性渐变*/ .linear12{background-image:linear-gradient(to bottom left,#00cc66,#505050);background-image:-webkit-linear-gradient(to bottom left,#00cc66,#505050);} /*从左上角向右下角线性渐变*/ .linear13{background-image: linear-gradient(to bottom right,#00cc66,#505050);background-image:-webkit-linear-gradient(to bottom right,#00cc66,#505050);} /*从右向左线性渐变*/ .linear14{background-image: linear-gradient(to left,#505050,green,#00cc66,orange);background-image:-webkit-linear-gradient(to left,#505050,green,#00cc66,orange);} /*径向渐变*/ /*1,渐变往中心方向聚焦--center*/ .linear15{ background-image:radial-gradient(circle at center,#505050,#00cc66); background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66); } /*2,渐变往顶部方向聚焦--top*/ /*3,渐变往右边方向聚焦--right*/ /*4,渐变往底部方向聚焦--bottom*/ /*5,渐变往左边方向聚焦--left*/ /*6,渐变往左上角方向聚焦--top left*/ /*7,渐变往右上角方向聚焦--top right*/ /*8,渐变往右下角方向聚焦--bottom right*/ /*9,渐变往左下角方向聚焦--bottom left*/ /*circle是圆形,ellipse是椭圆形*/ /*圆形渐变*/ .linear16{ background-image:radial-gradient(20px circle at center,#505050,#00cc66); background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66); } /*椭圆渐变*/ .linear17{ background-image:radial-gradient(2em 4em ellipse at center,#505050,#00cc66); background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66); } /*可以自定义圆形的方向*/ .linear18{ background-image:radial-gradient(2em circle at top,#505050,#00cc66); background-image:-webkit-radial-gradient(circle at center,#505050,#00cc66); } /*可以多色渐变*/ .linear19{ background:radial-gradient(red 20%,green 50%,blue 80%); background:-webkit-radial-gradient(red 20%,green 50%,blue 80%); } </style> </head> <body> <section> <!--从左向右渐变--> <div class="linear1"></div> <div class="linear8"></div> <!--从顶部向底部渐变--> <div class="linear2"></div> <div class="linear6"></div> <!--从右边向左边渐变--> <div class="linear3"></div> <div class="linear4"></div> <!--从底部向顶部渐变--> <div class="linear5"></div> <div class="linear7"></div> <div class="linear9"></div> <!--从右下角向左上角线性渐变--> <div class="linear10"></div> <!--从左下角向右上角线性渐变--> <div class="linear11"></div> <!--从右上角向左下角线性渐变--> <div class="linear12"></div> <!--从左上角向右下角线性渐变--> <div class="linear13"></div> <!--从右向左渐变--> <div class="linear14"></div> <!--径向渐变--> <div class="linear15"></div> <!--圆形渐变--> <div class="linear16"></div> <!--椭圆渐变--> <div class="linear17"></div> <!--可以自定义圆形的方向--> <div class="linear18"></div> <div class="linear19"></div> </section> </body> </html>
标签：
原文地址：http://www.cnblogs.com/windtony/p/4451339.html
