CSS3技巧 —— 渐变

CSS渐变在Webkit率先得到实现，现在Firefox 3.6+也支持了，来看下各个浏览器如何实现CSS渐变效果。

Webkit

下面这行代码可用于Chrome, Safari等，它能实现线性渐变，从top(#ccc)渐变到bottom(#000)。

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Firefox 3.6+

background: -moz-linear-gradient(top,  #ccc,  #000);

IE这个垃圾需要使用滤镜

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

跨浏览器的渐变代码

把上面三行代码合在一起就是一段跨浏览器的渐变代码。注意：我在开头加了一个background，以防用户使用的浏览器不支持这些特性。

background: #999; /* for non-css3 browsers */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

IE的限制

IE的渐变滤镜不支持 color-stop，gradient angle，radial gradient。也就是说你只能实现水平或垂直的渐变，渐变色也只有2种：StartColorStr 和 EndColorStr。

最后的温馨提示

不是所有浏览器都支持CSS渐变。为了保险起见，你最好不要依赖它，只能把它当作加分的东西。如果你像我玩博客一样，面向的都是Chrome，Firefox，往死里用吧！

转载于:https://www.cnblogs.com/zhujl/archive/2011/10/01/2197112.html

CSS3技巧 —— 渐变相关推荐

CSS3技巧：利用css3径向渐变做一张优惠券（转）
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
html好看的渐变效果,CSS3实现渐变/立体/扁平的漂亮按钮
网页UI设计追求精美漂亮,除此之外,实现代码也越趋于简单易用.本文就介绍如何用CSS3实现渐变/立体/扁平的漂亮按钮,代码简单易用,但是效果却是十分之好. CSS3实现渐变/立体/扁平的漂亮按钮按钮 ...
html给文字添加波浪线,使用CSS3线性渐变（linear-gradient）实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
波浪形状html,使用CSS3线性渐变（linear-gradient）实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
在html中怎么写背景色渐变,css3背景色渐变
css3背景色渐变难是不难,就是麻烦.不同浏览器用法不同,还有个爱掺和的ie... 一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ...
超多的CSS3圆角渐变网页按钮
<!DOCTYPE html> <head> <title>超多的CSS3圆角渐变按钮</title> <style type="tex ...
CSS3彩色渐变的电脑键盘js特效
下载地址 CSS3彩色渐变的电脑键盘特效是一款键盘网页特效. dd:
html css径向渐变,如何实现css3径向渐变如何定义中心和大小形状
如何实现css3径向渐变如何定义中心和大小形状发布时间:2020-07-13 16:23:57 来源:亿速云阅读:249 作者:Leah 如何实现css3径向渐变如何定义中心和大小形状?很多新手对 ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...

CSS3技巧 —— 渐变

CSS3技巧 —— 渐变相关推荐

最新文章

热门文章