【代码片段】CSS3 渐变（CSS3 Gradients）

background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#bbb‘, endColorstr=‘#000‘);
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);

CSS3渐变生成工具：CSS3 Gradient Generator、colorzilla

延伸学习教程：http://css-tricks.com/examples/CSS3Gradient/、http://www.w3cplus.com/content/css3-gradient（中文）

时间： 2024-08-09 09:00:22

【代码片段】CSS3 渐变（CSS3 Gradients）的相关文章

CSS3 渐变（Gradients）

参考: http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradien

使用CSS3动画属性实现360°无限循环旋转【代码片段】

使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: <div id="test"> <img src="/CSS3/img/yinyue.png" id="change" /> //图片路径自定义 </div> CSS样式书写如下: #change{ position:absolute; right:200px; -webkit-animation:change 2s linea

Css3渐变(Gradients)-径向渐变

CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你也可以指定渐变中心.形状(圆形或椭圆形).大小. 默认情况下,渐变的中心是center(表示在中心),渐变的形状是ellipse(表示椭圆形),变天的大小是farthest-corner(表示到最远的角落) 语法: background: radial-gradient(center, shape

详解CSS3渐变

渐变,指形状或颜色的有规律性的变化,往往可以给人很强的节奏感和审美情趣,这里研究的主要是颜色的渐变.渐变的形式在日常生活中很常见,在网页中的用的也很多,传统网页技术中往往用图片来实现渐变,容易带来加载负担和动态定制的瓶颈. CSS3提供了实现渐变的属性,随着浏览器的逐步支持,研究CSS3渐变已势在必行.涉及CSS渐变的属性主要有linear-gradient.radial-gradient.repeating-linear-gradient.repeating-radial-gradient四个

使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-text-effect.html .这种方式优点是图片可控,所以可实现很复杂的渐变效果,但是缺点是图片渐变色必须与背景色一致,同时损失了鼠标点击.文字选择等事件. 改进的方法可以使用 CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片.下面是实现效果示例,相比以

css3渐变详解

今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点中间颜色的位置,结束点颜色); Linear:渐变的类型(线性渐变): 渐变的形式:可选参数有两种方式-1.设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换. 2.使用关键字,left代表从左到右,top代表从上到下,同理right就是从右到左,lefttop-从坐上到右下,同理leftbott

再说CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

CSS3渐变——径向渐变

上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用. CSS3径向渐变 CSS3径向渐变是圆形或椭圆形渐变.颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合.但相对线性渐变要比径向渐变复杂的多. 一.径向渐变的语法 CSS3的径向渐变已得到众多浏览器引擎的支持,只不过其语法的版本根据不同的引擎浏览器,其语法也不一样