`
cugbmao09
  • 浏览: 35173 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS3渐变各内核实现

    博客分类:
  • CSS3
 
阅读更多

 

Webkit

尽管Mozilla和Webkit通常对CSS3属性采取同样的语法,但是对于渐变,他们的实现方式并不一样。Webkit是第一个支持渐变的浏览器内核,它使用下面的结构:

 

1
2
3
4
/* 语法,参考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

Webkit

这些语法看起来很复杂,因此需要用一个逗号来隔开这个参数组。

  • 渐变的类型? (linear)
  • 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
  • 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
  • 开始的颜色? (from(red))
  • 结束的颜色? (to(blue))

Mozilla

Firefox,从3.6版本才开始支持渐变,使用和Webkit略微不同的语法。

1
2
3
4
5
/* 语法,参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
 
/* 实际用法*/
background: -moz-linear-gradient(top, red, blue);

Mozilla

  • 注意渐变的类型——linear——放到了属性前缀中了
  • 渐变从哪里开始? (top – 我们也可以使用度数,比如-45deg)
  • 开始的颜色? (red)
  • 结束的颜色? (blue)

Color-Stops

如果不需要从一个颜色到另一个颜色的100%渐变怎么办?这就是color stop起作用的时候了。一个普遍的设计技术是使用一个较短而细微的渐变,比如:

Subtle Gradients
注意顶部的浅灰色到白色的细小的渐变

在过去,标准的做法就是制作一个图片,并将其设为一个元素的背景图片,然后让其水平平铺。然而使用CSS3,这是个小Case。

1
2
3
4
background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;

这次,我们让渐变结束于8%,而不是默认的100%。请注意我们也在头部采用了一个边框,以形成对比。这很常用。

如果我们想要添加多一种(几种)颜色,我们可以这样做:

1
2
3
background: white; /* 备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);
  • 对于-moz 版本,从元素的20%的高度的地方开始是红色。
  • 而对于-webkit,使用color-stop,采用两个参数:哪里开始停止,使用哪种颜色。
在css3渐变上,webkit小组宣布将采用Mozilla的语法,但由于以下语法在08年提出,已经较为广泛的使用,所以在新的Webkit引擎中,保留了下列语法,但是建议使用Mozilla语法。
-webkit-gradient(type, start_point, end_point, / color-stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / color-stop...)

IE

IE并不支持CSS渐变,但是提供了渐变滤镜,可以实现最简单的渐变效果:

1
2
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */
分享到:
评论

相关推荐

    兼容各浏览器css渐变

    本文将详细介绍如何实现兼容各浏览器的CSS渐变效果。 #### CSS渐变的基本概念 CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果。它可以是线性的也可以是径向的。在标准的CSS3规范中,渐变可以通过`linear-...

    CSS3下的渐变文字效果实现示例

    本文将详细讲解如何通过两种方法在CSS3下实现渐变文字效果。 首先,我们来看第一种方法,利用`mask-image`属性。这种方法主要适用于Chrome和Safari浏览器。在HTML中,我们创建一个带有`data-text`属性的元素,例如...

    1.07 css3新特性

    本资源摘要信息主要介绍CSS3的新特性,包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,...

    CSS3做的机器猫 测试CSS3性能

    首先,CSS3在选择器方面有了显著的提升,例如,我们可以使用伪类选择器`:hover`、`:active`和`:focus`来实现元素在不同状态下的样式变化,而`:before`和`:after`可以插入内容到元素前后。此外,还有基于属性的选择器...

    CSS3中线性颜色渐变的一些实现方法

    在本文中,我们将深入探讨如何在Safari和Chrome(基于WebKit内核)以及Firefox(基于Gecko内核)的浏览器中实现CSS3线性颜色渐变。 首先,WebKit内核的浏览器,如Safari和Chrome,采用了以下的语法来创建线性颜色...

    HTML5 CSS3 : 进度条的实现实例源码

    在本实例中,我们将深入探讨如何使用HTML5和CSS3来实现一个具有视觉吸引力的进度条。进度条在网页中广泛应用,如文件上传、加载过程、任务进度指示等,能有效地向用户反馈操作状态。 首先,HTML5引入了一个新的元素...

    IE兼容CSS3

    在网页设计领域,CSS3(层叠样式表第三版)引入了许多令人兴奋的新特性,如阴影、渐变、动画、多列布局等,极大地提升了网页的视觉效果和用户体验。然而,由于历史原因,尤其是较旧版本的Internet Explorer(IE)...

    使用CSS3的背景渐变Text Gradient 创建文字颜色渐变

    在本文中,将介绍如何使用CSS3的背景渐变属性-webkit-gradient,来实现文字颜色的渐变效果,而不需要依赖图片,进而减少页面的加载时间和服务器的请求量。 ### CSS3 背景渐变的基本原理 在CSS3中,背景渐变主要是...

    css3实现背景颜色渐变让图片不再是唯一的实现方式

    在CSS3中,背景颜色渐变的实现为网页设计提供了更多可能性,不再局限于将渐变效果作为图片。这种技术在现代浏览器中得到了广泛支持,尤其是Mozilla Firefox和WebKit内核的浏览器,如Chrome和Safari。这里我们将深入...

    CSS3 support for Internet Explorer 6, 7, and 8

    这些浏览器并不原生支持许多CSS3的新功能,如圆角、阴影、渐变、多列布局等,这给开发者带来了挑战。为了克服这个问题,通常需要使用一些技巧和工具有针对性地处理。 首先,我们需要理解CSS3是层叠样式表...

    CSS3 发光边框

    不同浏览器可能对CSS3支持程度不同,因此使用`-webkit-`前缀来兼容Webkit内核的浏览器。 除了`box-shadow`,还可以使用伪元素`::before`和`::after`结合`content`属性和`border`样式来创建发光效果。这种方法需要更...

    纯js和css实现渐变色包括静态渐变和动态渐变

    以线性渐变为例,我们可以使用`background-image`属性,配合`-webkit-gradient`(对于Webkit内核的浏览器,如Chrome和Safari)或`linear-gradient`(标准语法)来实现。下面是一个线性渐变的例子: ```css #fade { ...

    CSS3卡通山上日出日落场景特效.zip

    这种特效通常通过CSS3的动画(Animations)和过渡(Transitions)属性来实现,以及可能结合使用背景图像、渐变和边框半径等技术来创建出山脉和太阳的卡通形象。 【标签】中的"网页特效"指的是利用HTML、CSS和...

    CSS3线性渐变简单实现以及该属性在浏览器中的不同

    在本文中,我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。 PS:本文原文本来提供了一个视频,但是由于众所周知的原因,我们无法观看这个在Youtube上的视频,想看的同学请自己想办法...

    详解CSS3中使用gradient实现渐变效果的方法

    CSS3中的渐变效果是通过使用gradient函数实现的,主要包含线性渐变(linear-gradient)和径向渐变(radial-gradient)两种类型。这两种渐变类型可以被用来创建视觉上的平滑颜色过渡效果,适用于背景以及任何需要渐变视觉...

    兼容IE与firefox的css 线性渐变(linear-gradient)

    要实现一个在IE和Firefox浏览器中都兼容的CSS线性渐变效果,...需要注意的是,随着浏览器的更新迭代,标准CSS语法的支持度在不断提高,因此建议在使用旧语法的同时,不断检查并更新以使用更简洁和标准的CSS3渐变语法。

    css的未来技术 css测试技术

    蒙版可以使用CSS3渐变或半透明PNG图片实现,通过调整alpha值来控制元素的透明度。与之相关的属性还有`-webkit-mask-clip`、`-webkit-mask-position`和`-webkit-mask-repeat`等,它们的语法与`background`属性相似。...

    CSS3,线性渐变(linear-gradient)的使用总结

    《CSS3 经典教程系列》的前一篇文章向大家详细介绍了 text-shadow 文本阴影特性的用法,今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前,渐变效果和阴影、圆角效果一样都是做...

Global site tag (gtag.js) - Google Analytics