css 实现渐变

 background:-ms-radial-gradient(circle,rgba(0, 0, 0, 0.2),rgba(0,0,0,0)); /* IE 10*/

                background: -webkit-radial-gradient(circle,rgba(0, 0, 0, 0.2),rgba(0,0,0,0)); /* Safari 5.1 - 6.0 */

                background: -o-radial-gradient(circle,rgba(0,0,0,0.20),rgba(0,0,0,0)); /* Opera 11.1 - 12.0 */

                background: -moz-radial-gradient(circle,rgba(0,0,0,0.20),rgba(0,0,0,0)); /* Firefox 3.6 - 15 */

                background: radial-gradient(circle,rgba(0,0,0,0.20),rgba(0,0,0,0));  /* 标准的语法 */

这种带透明度的写法,需要用 rgba来实现.

坑最多的就是IE, radial-gradient 前面需要加上 -ms-,不然别的方法都不能实现,网上也没有这种加法,还是自己研究出来的.....这个只能兼容IE10以上的,IE9以下的不兼容,需要另外研究别的方法.

circle是为了让渐变到最后线条消失,让黑色集中在中心部分.实现一个渐渐消失的感觉.

IE好坑.不知不觉成前端了...

巴特西

css 实现渐变

最新文章

热门文章