css实现径向和线性渐变,CSS3 线性渐变和径向渐变（示例+附图）

最新推荐文章于 2024-01-27 09:54:17 发布

zljchris

最新推荐文章于 2024-01-27 09:54:17 发布

阅读量156

点赞数

文章标签： css实现径向和线性渐变

线性渐变：ie6以下不兼容

径向渐变：只支持firefox、Chrome和Safari

Background Color

*{marigin:0;padding:0;

}div{margin-bottom:20px;width:300px;height:100px;

}.linear{/*线性渐变样式*/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%); /*W3C*/filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1FA9F4', endColorstr='#001C4E',GradientType=0 ); /*IE6-8*/

}.circle{/*径向渐变样式*/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+*/

}