標籤：
一.線性漸層linear-gradient
1.使用方法：
background:-webkit-linear-gradient(red,blue);
background:-moz-linear-gradient(red,blue);
background:linear-gradient(red,blue);
2.拓展應用
光斑：
<style>
.box{width: 300px;height: 300px;transition: 1s;
background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 150px,rgba(255,255,255,0.9) 170px,rgba(255,255,255,0.9) 180px,rgba(255,255,255,0) 210px) no-repeat -220px 0,url("img/new_bg.png") no-repeat;}
.box:hover{background-position: 300px 0,-100px -100px;}
</style>
<body>
<div class="box"></div>
</body>
二.放射狀漸層radial-gradient
1.使用方法：
background:-webkit-radial-gradient(red,blue);
background:-webkit-radial-gradient(100px 50px,circle,red,blue); //形狀： ellipse、circle或者具體數值或百分比，也可以是關鍵字（最近端，最近角，最遠端，最遠角，包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）; firefox目前只支援關鍵字
三.相容問題
<style>
.box{width:300px;height:300px;
background:-webkit-linear-gradient(red,blue); //saifari Google
background:-moz-linear-gradient(red,blue); //相容FF
background:linear-gradient(red,blue); //IE11 10
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘red‘,endColorstr=‘blue‘,GradientType=‘0‘);} //相容IE 9以下至6 只能相容線性漸層 GradientType=‘0‘或者‘1’
</style>
<body>
<div class="box"></div>
</body>
CSS3漸層效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
