Rumah  >  Artikel  >  hujung hadapan web  >  兼容多浏览器的gradient写法详解

兼容多浏览器的gradient写法详解

零下一度
零下一度asal
2017-05-18 10:18:562045semak imbas

兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景,下面是当前五大浏览器对 gradient 的支持 经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景。
下面是当前五大浏览器对 gradient 的支持

代码如下:

<style type="text/css" media="screen"> 
#gradient { 
width: 200px; 
height: 200px; 
/* 如果浏览器不支持渐变,使用图像作为背景 */ 
background: url(gradient.jpg); 
/* Webkit: Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900)); 
/* Webkit: Safari 5.1+, Chrome 10+ */ 
background: -webkit-linear-gradient(top, #ff6600, #339900); 
/* Firefox 3.6+ */ 
background: -moz-linear-gradient(top, #ff6600, #339900); 
/* Opera 11.10+ */ 
background: -o-linear-gradient(top, #ff6600, #339900); 
/* IE 10 */ 
background: -ms-linear-gradient(top, #ff6600, #339900); 
/* IE < 10 */ 
/* 注意:这一行必须写在最后 */ 
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);} 
</style>

代码如下:

<p id="gradient"></p>

啥时没有IE6,啥时世界算太平啊。万恶的IE。

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱(2)-css视频教程

4. 深入了解CSS3渐变(Gradients)

Atas ialah kandungan terperinci 兼容多浏览器的gradient写法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn