关于linear-gradient在不同浏览器下的兼容差异

最新推荐文章于 2022-04-23 14:34:08 发布
最新推荐文章于 2022-04-23 14:34:08 发布
阅读量2.5k 收藏
点赞数 1
文章标签： css3 兼容差异
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq8241994/article/details/80818530
版权

今天在做页面时发现的，linear-gradient在不同浏览器下的渲染情况不同，请大家耐心的往下看

关于linear-gradient这个属性本身就不多说了，重要的它的渲染：

如果不加各大浏览器的私有前缀的话，各个浏览器就按照他们本身的理解来渲染，此时就会出现浏览器之间的差异，主要体现在渲染的角度上。

例如同样是135deg，谷歌的方向是从右下角到左上角，而ie以及火狐则是从左上角到右下角

当加上浏览器的私有前缀的话，方向就会统一为右下到左上。

--------以上内容是在公司的电脑上测试的，也许受到浏览器版本的影响---------

over


百岁如流富贵冷灰
关注
兼容IE与firefox的css 线性渐变（linear-gradient）
09-25
兼容IE与firefox的css 线性渐变（linear-gradient）实现代码，需要的朋友可以参考下
深入剖析CSS中的线性渐变linear-gradient
09-24
需要注意的是，不同浏览器对渐变线的处理可能存在差异，尤其是在老版本的Webkit浏览器中，如Safari 4-5和iOS 3.2-4.3等，需要使用`-webkit-linear-gradient`前缀，并且角度计算与标准浏览器有所不同。 **色标** ...
linear-gradient在Chrome中的写法
banana_yaya的博客
03-01 930
今天在使用linear-gradient时，发现linear-gradient兼容性写法在不同浏览器中表现不同，具体不同请自行百度，不难找到。 本文记录的是在谷歌下设置angle这个参数时，设为top(0deg)和bottom(180deg)显示不正常的问题。 以angle=top为例。 错误示范： 实现效果： 正确示范： 实现效果： 两者的区别在于：当html整个页...
html渐变不兼容,css3 linear-gradient渐变效果及兼容性处理
weixin_34374684的博客
06-17 599
Document.gradient{height:40px;background: #A56697;background:-moz-linear-gradient(left,#CA5A83,#7E72AB);background:-webkit-linear-gradient(left,#CA5A83,#7E72AB);background: -o-linear-gradient(left,#CA...
webkit内核（chrome、safari） 、FF、IE 、opera 下的linear-gradient 写法
Vin1992的博客
01-18 2854
1.webkit内核 下     基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );     注释： -webkit-gradient是background的一个属性值；webkit内核的Linear Grad
linear-gradient兼容性写法在不同浏览器中表现不同
热门推荐
这个昵称没有被占用吧的博客
09-03 1万+
今天在使用linear-gradient时，使用了兼容写法，但是忘记写不加前缀的linear-gradient了，结果发现相同的写法，带前缀和不带前缀在浏览器中表现是不一样的。 linear-gradient用法： linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner&gt
css3 linear-gradient渐变效果及兼容性处理
daruanzai3165的博客
04-24 799
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .gradie...
CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
09-25
在不同的浏览器中，实现渐变背景的方式略有差异，导致了兼容性问题。本文将详细介绍如何创建一个垂直渐变，从红色渐变到半透明的蓝色，并在不支持Opera浏览器的情况下兼容其他主流浏览器。 首先，我们来看一下IE...
css-gradient-generator:CSS渐变生成器
04-27
**浏览器兼容性** 由于CSS渐变在不同浏览器中可能存在差异，此生成器特别强调了最佳的浏览器支持。这意味着它会生成兼容多种浏览器的代码，包括但不限于Chrome、Firefox、Safari、Edge和Internet Explorer。 **...
css-gradient-generator:ZtMCSS背景渐变生成器的源代码-css source code
03-25
为了确保在不同浏览器上的一致显示，源代码可能包含了针对不同浏览器（如Firefox、Chrome、Safari等）的前缀和语法差异的兼容性代码。例如，可能需要处理`-webkit-linear-gradient`、`-moz-linear-gradient`等。 6...
别具光芒——CSS属性、浏览器兼容与网页布局
03-17
通过学习和掌握这些CSS属性、浏览器兼容性和网页布局的知识，开发者可以创建出既美观又能在不同浏览器和设备上良好展示的网页。持续关注新的CSS规范和发展趋势，如CSS Houdini、CSS Scroll Snap等，将有助于保持技术...
兼容IE与firefox的css 线性渐变（linear-gradient）--gxy
读书探究世界的博客
03-28 2378
现行渐变 IE系列 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FF0000’,endColorStr=’#F9F900’,gradientType=’0’); 参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平 Firefox
IE 不支持 background-image:linear-gradient 。IE input 默认
韩梦飞沙_韩亚飞
03-19 2585
IE 不支持  background-image:linear-gradient(to right,rgba(0, 194, 255, 0.2),#00C2FF,rgba(0, 194, 255, 0.2));==兼容当前五大浏览器的渐变颜色背景gradient的写法&lt;style type="text/css" media="screen"&gt; #gradient { width: 20...
ie不兼容css3 渐变色,兼容IE与firefox的css 线性渐变（linear-gradient）
weixin_30707165的博客
08-04 432
现行渐变首先看下示例(1)垂直渐变(2)垂直渐变IE系列filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，...
ie9兼容css正常吗,css3属性linear-gradient兼容ie9问题
weixin_31029019的博客
08-03 270
1.在vue-cli构建的商城项目中发现background-image: linear-gradient(to right, #ff0067, #ff5698);在ie9中失效，无法显示任何内容。解决方案：IE可以依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr 表示终点颜色。GradientType 表示渐变类型，0 为缺省值，表示垂直渐变，1 表示水平渐变。...
文字渐变IE不兼容处理
qq_29603991的博客
03-11 1892
问题：在做文字渐变类需求时，发现谷歌下可以完美实现的效果，在IE下却不是。 在谷歌下： 而在IE下： span{ color: transparent; display: inline-block; font-size: 2em; font-family: '微软雅黑'; background-ima...
liner-gradient渐变兼容IE8、IE9
qq_43654065的博客
07-28 634
兼容写法： /* Firefox 3.6+ */ background: -moz-linear-gradient(0deg, #00a485c2 30%, #00c8a033 100%); /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(0deg, #00a485c2 30%, #00c8a033 100%); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linea
渐变色及其兼容
qq_40703860的博客
01-13 219
background: -o-linear-gradient(top, #ff946e, #f43434); background: -webkit-gradient(linear, top, bottom, from(#ff946e), to(#f43434)); background: -o-linear-gradient(top, #ff946e, #f43434); background: linear-gradient(180deg, #ff946e, #f43434);
css背景渐变兼容性问题解决
Noctis99的博客
04-23 825
background: -webkit-linear-gradient(right,#9EC234 0%,#539748 100%); background: -moz-linear-gradient(right,#9EC234 0%,#539748 100%); background: -o-linear-gradient(right,#9EC234 0%,#539748 100%); background: linear-gradient(to right,#9EC234 0%,#539748 1...
全浏览器兼容的CSS渐变解决方案
本文将详细讨论如何实现兼容各浏览器的CSS渐变效果，包括IE7及以上版本以及主流浏览器的解决方案。 在网页设计中，CSS渐变是一...通过这些技术，我们可以创建出在各种环境下的跨浏览器兼容的渐变效果，提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值