Home > Developer > Web Develop
Linear gradient: IE6 less compatible
Radial gradient: only firefox, chrome, and Safari are supported
<!DOCTYPE HTML> <HTML> <Head> <Metahttp-equiv= "content-type"content= "text/html"CharSet= "utf-8" /> <title>Background Color</title> <styletype= "text/css"> * {Marigin:0;padding:0; }Div{Margin-bottom:20px;width:300px;Height:100px; }. Linear{/*linear gradient Style*/Background-color:#1FA9F4; /*old Browsers*/Background-image:-moz-linear-gradient (top, #1FA9F4 0, #001C4E 100%); /*ff3.6+*/Background-image:-webkit-gradient (linear, left top, left bottom, color-stop (0%, #1FA9F4), color-stop (100%, #001C4E)); /*chrome,safari4+*/Background-image:-o-linear-gradient (top, #1FA9F4 0, #001C4E 100%); /*Opera 11.10+*/Background-image:-ms-linear-gradient (top, #1FA9F4 0, #001C4E 100%); /*ie10+*/Background-image:linear-gradient (to bottom, #1FA9F4 0, #001C4E 100%); /* the*/Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #1FA9F4 ', endcolorstr= ' #001C4E ', gradienttype=0) ; /*ie6-8*/ }. Circle{/*Radial Gradient Style*/Background-color:#1FA9F4; /*other Browsers*/Background-image:-moz-radial-gradient (center 80px 45deg, Circle farthest-corner, #1FA9F4 0, #001C4E 100%); /*ff3.6+*/Background-image:-webkit-gradient (radial,50% 100%,10,50% 50%,90,from (rgba (31,169,244,1)), to (rgba (0,28,78,1 ))); /*chrome,safari4+*/ } </style> </Head> <Body> <Divclass= "linear"> </Div> <Divclass= "circle"> </Div> </Body> </HTML>
Note: Background-image can write background
My own radial gradient compatible code that I wrote on my web page: firefox, chrome, IE10, ie10+, Safari (background-image old-fashioned) compatible
Background:rgb (98, Panax notoginseng, 140), background:-webkit-radial-gradient (circle at top, RGB (up, 193), RGB (98, 37, (+)); Background-image:-webkit-gradient (radial,50% 0%,0,50% 55%,90,from (rgb (, 193)), to (rgb (98, Panax notoginseng, ))); /* */background:radial-gradient (circle at top, RGB (up, 193), RGB (98, notoginseng,)) background:- Moz-radial-gradient (circle at top, RGB (up, 193), RGB (98, notoginseng), background:-ms-radial-gradient (circle at top, RGB (193), RGB (98, notoginseng,));
Linear gradient compatible codes: firefox, chrome, IE10, ie10+, Safari Compatible
Figures
Radial
Linear
CSS3 Linear and radial gradients
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
