css 实现渐变

两盒软妹~` 提交于 2019-11-26 19:47:00
background:-ms-radial-gradient(circle,rgba(0, 0, 0, 0.2),rgba(0,0,0,0)); /* IE 10*/
                background: -webkit-radial-gradient(circle,60% 55%, closest-side,rgb(0,0,0,0.28),rgb(0,0,0,0)); /* Safari 5.1 - 6.0 */
                background: -o-radial-gradient(circle,60% 55%, closest-side,rgb(0,0,0,0.28),rgb(0,0,0,0)); /* Opera 11.1 - 12.0 */
                background: -moz-radial-gradient(circle,60% 55%, closest-side,rgb(0,0,0,0.28),rgb(0,0,0,0)); /* Firefox 3.6 - 15 */
                background: radial-gradient(circle,rgb(0,0,0,0.20),rgb(0,0,0,0));  /* 标准的语法 */

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

而且IE也不识别rbg(0,0,0,0) 这种带透明度的写法,需要用 rgba来实现.

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!