兼容IE与firefox的css 线性渐变（linear-gradient）

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量97 收藏
点赞数
文章标签： xhtml
IE系列 
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平 
Firefox 
background: -moz-linear-gradient(top, #FF0000, #F9F900); 
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变 
Opera 
background: -o-linear-gradient(top,#FF0000, #F9F900); 
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变 
webkit，如Chrome、Safari等 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 
参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>线性渐变（linear-gradient）---http://www.jb51.net</title> 
<style type="text/css"> 
.test1 
{ 
width: 200px; 
height: 80px; 
text-align: center; 
line-height: 80px; 
margin-bottom: 10px; 
color: White; 
font-size: 20px; 
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 
background: -moz-linear-gradient(top, #FF0000, #F9F900); 
background: -o-linear-gradient(top,#FF0000, #F9F900); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 
} 
.test2 
{ 
width: 200px; 
height: 80px; 
text-align: center; 
line-height: 80px; 
margin-bottom: 10px; 
color: White; 
font-size: 20px; 
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1'); 
background: -moz-linear-gradient(left, #FF0000, #F9F900); 
background: -o-linear-gradient(left,#FF0000, #F9F900); 
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900)); 
} 
</style> 
</head> 
<body> 
<div class="test1"> 
垂直渐变 
</div> 
<div class="test2"> 
水平渐变 
</div> 
</body> 
</html>
weixin_33691817
关注
关于css3中@keyframes在火狐浏览器下的兼容问题（我是来提问的）
猿来是你呀
07-16 3827
关于firefox下@keyframes的兼容问题。
CSS线性渐变（linear-gradient）浏览器兼容时角度的问题
F_san的博客
08-21 1101
练习CSS写美团移动端页面时，header部分为渐变色。 background: linear-gradient(90deg, #ffd265, #ffbf2e); 但是加入浏览器前缀后，并没有按照理想的角度渐变。 background: linear-gradient(90deg, #ffd265, #ffbf2e); background: -o-linear-gradient(90deg, #ffd265, #ffbf2e); background: -ms-linear.
WebKit更新CSS3渐变支持，匹配Mozilla语法
01-18 141
上周五，WebKit的团队宣布，他们在渲染引擎进行更新CSS3渐变支持，Mozilla的实现把它的线。 每晚WebKit的构建现在包括用于支持-webkit-linear-gradient和-webkit-radial-gradient在除旧-webkit梯度值。 这些新值将使用相同的语法-moz-linear-gradient和-moz-radial-gradient ，所以开发人员现在可以使...
ie不兼容css3 渐变色,兼容IE与firefox的css 线性渐变（linear-gradient）
weixin_30707165的博客
08-04 454
现行渐变首先看下示例(1)垂直渐变(2)垂直渐变IE系列filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，...
兼容IE与firefox的css 线性渐变（linear-gradient）--gxy
读书探究世界的博客
03-28 2392
现行渐变 IE系列 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FF0000’,endColorStr=’#F9F900’,gradientType=’0’); 参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平 Firefox
css3渐变之线性渐变linear-gradient
办公研究所
07-24 808
线性渐变基本语法： background: linear-gradient(direction, color-stop1, color-stop2, ...); 　　 为了创建一个线性渐变，必须至少定义两种颜色结点。同时，也可以设置一个起点和一个方向（或一个角度）。 参数：其共有三个参数 第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。 第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示
html渐变直线原理,深入剖析CSS中的线性渐变linear-gradient
weixin_28953819的博客
06-04 794
在CSS3出现之前，渐变效果只能通过图形软件设计图片来实现，可拓展性差，还影响性能。如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果。渐变实际上分为线性渐变和径向渐变两种，本文介绍线性渐变。定义渐变实际上是两种或多种颜色之间的平滑过渡。而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡。渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制...
CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）
余白x的博客
12-09 1964
　CSS3 Gradient 分为linear-gradient（线性渐变）和radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。 　　本文照常忽略IE不管，我们主要看看在 Mozilla、Webkit、O...
CSS3: 线性渐变 linear-gradient
大空翼 つばさ
11-11 1149
　　《CSS3 经典教程系列》的前一篇文章向大家详细介绍了text-shadow文本阴影特性的用法，今天这篇文章我们在一起来看看CSS3中实现渐变效果的 Gradient 属性的具体用法。在以前，渐变效果和阴影、圆角效果一样都是做成图片，直接编写 CSS 代码就可以实现。 您可能感兴趣的相关文章 Web 开发人员和设计师必读文章推荐 20个非常绚丽的 CSS3 特性应用演示 35...
CSS3,线性渐变（linear-gradient）的使用总结
09-24
在Firefox等基于Mozilla浏览器中，线性渐变语法为： ```css -moz-linear-gradient([||,]?,[,]*); ``` 其中，第一个参数定义渐变的方向，`top`表示从上到下，`left`表示从左到右。接下来的参数是颜色停止点，可以定义...
CSS渐变（linear-gradient、radial-gradient）
qq_43812504的博客
12-09 6001
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。通过使用 CSS3 渐变（gradients），可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义 一、线性渐变： 语法：background:
XHTML 简介
wjs2024的博客
10-04 890
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
（1） 输入整数元素序列并创建序列表 （2） 实现序列表的遍历 （3） 在序列表中搜索某个元素，如果搜索成功
11-01
（1） 输入整数元素序列并创建序列表。（2） 实现序列表的遍历。（3） 在序列表中搜索某个元素，如果搜索成功，则返回1，否则返回0。（4） 检查序列表中的元素是否对称，对称返回1，否则关闭.zip
8) The7 - WordPress 网站与电子商务构建器 v12.0.2.zip
11-01
The7 是一个功能丰富的 WordPress 主题，专为网站和电子商务构建设计，适合各种类型的网站，包括商务、博客、投资组合和在线商店。以下是 The7 的主要特点： 高度可定制：提供强大的主题选项和自定义工具，让用户可以轻松调整外观和布局，满足不同需求。 内置页面构建器：与 WPBakery Page Builder 和 Elementor 兼容，用户可以通过拖放的方式轻松创建和设计页面。 丰富的预建模板：提供超过 40 个预建网站模板，用户可以快速导入并进行个性化修改，节省设计时间。 响应式设计：确保网站在所有设备（手机、平板、桌面）上均能良好展示，提供优质用户体验。 WooCommerce 集成：完美支持 WooCommerce，具备多种电商功能，帮助用户轻松建立和管理在线商店。 SEO 友好：经过优化，有助于提高网站在搜索引擎中的排名，吸引更多流量。 多种内容模块：包括图像、视频、轮播、滑块等，帮助用户丰富网站内容的展示。 持续更新和支持：定期更新主题，确保用户获得最新的功能和安全性，同时提供专业的客户支持。
基于SSM的四六级在线考试系统.zip
11-01
基于SSM的毕业设计源码
HTML5游戏网站模板.zip
最新发布
11-01
页面数量：14页 网页主题：游戏网站模板、官网网站模板、网站模板 网页页面：首页、关于我们、游戏介绍、游戏详情、游戏博客、版本介绍、登录、注册、在线留言等 页面实现元素：导航 、下拉列表、轮播图、图文滚动、图文列表 图文切换、图文轮播、图片列表、 文字列表、 按钮悬停、图片列表、图片悬停、视频播放、表单、回到顶部 实现技术：HTML、CSS 、JQuery 源码样式及js文件均分开存放，网页支持手机端查看，
电调测试程序 https://blog.csdn.net/weixin-45902229/article/details/121
11-01
电调测试程序 https://blog.csdn.net/weixin-45902229/article/details/121
-webkit-linear-gradient怎么适配IE11
11-24
根据提供的引用内容，-webkit-linear-gradient是webkit内核浏览器的CSS属性，不支持IE11浏览器。但是可以使用其他浏览器支持的CSS渐变属性来适配IE11，例如： ```css background: linear-gradient(90deg, #ffd265, #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值