Home > Developer > Web Develop
I. Linear gradient linear-gradient
1. How to use:
Background:-webkit-linear-gradient (Red,blue);
Background:-moz-linear-gradient (Red,blue);
Background:linear-gradient (Red,blue);
2. Expand your Application
Spot:
<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>
Two. Radial Gradient radial-gradient
1. How to use:
Background:-webkit-radial-gradient (Red,blue);
background:-webkit-radial-gradient (100px 50px,circle,red,blue); shape: ellipse, Circle, or Firefox currently supports only keywords
Three. Compatibility issues
<STYLE>
box{width:300px;height:300px;
Background:-webkit-linear-gradient (red,blue);//saifari Google
Background:-moz-linear-gradient (red,blue);// Compatible with FF
Background:linear-gradient (red,blue);//ie11 10
Filter:progid:DXImageTransform.Microsoft.gradient ( Startcolorstr= ' Red ', endcolorstr= ' Blue ', gradienttype= ' 0 ');} Compatible with IE 9 to 6 only compatible with linear gradient gradienttype= ' 0 ' or ' 1 '
</style>
<body>
<div class= "box" ></div>
</body>
CSS3 Gradient Effect
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
