css3中的渐变效果

关键词：

渐变是CSS3中比较丰富多彩的一个特性，通过渐变我们可以实现许多绚丽的效果。渐变可分为线性渐变和径向渐变。

（1）线性渐变：沿着某条直线朝一个方向产生渐变效果

语法：linear-gradient([<point> || angle]? <stop>,<stop>[,<stop>]*)

　　参数说明：
　　　　第一个参数表示线性渐变的方向。有四个取值，分别是：
　　　　　　to left：设置渐变从右到左。相当于270deg。
　　　　　　to right：设置渐变从左向右。相当于90deg。
　　　　　　to top：设置渐变从下到上。相当于0deg。
　　　　　　to bottom：设置渐变从上到下。相当于180deg。这是默认值。

　　　　第二个参数是起点颜色，可以指定颜色开始的位置

　　　　第三个参数是终点颜色。

　　示例：

div {
            width: 300px;
            height: 300px;
            background: linear-gradient(to right,red 0%, blue 33%, green 68%, yellow 100%);
     }

 （2）径向渐变：从一个中心点开始向四周产生渐变效果。

语法：radial-gradient([[<shape> || <size>] [at <position>]?, | at <position>]?<color-stop>[,<color-stop>]+)

　　参数说明：

　　　　position：确顶圆心的位置。如果提供2个参数，第一个代表横坐标，第二个代表纵坐标；如果只提供一个，第二个值默认为50%，即center。

　　　　shape：渐变的形状。ellipse表示椭圆形,circle表示圆形。默认为ellipse。另外，如果元素形状为正方形，则ellipse和circle的显示一样。

　　　　size：渐变的大小，即渐变到哪里停止。有四个取值：closest-side |  closest-corner  | farthest-side  | farthest-corner。默认值为farthest-corner。

　　　　color：指定颜色。

　　示例：

　　　　　.div1 {
            width: 200px;
            height: 200px;
 
            background: radial-gradient(circle at center, red, blue);
        }

        .div2 {
            width: 200px;
            height: 200px;
            border-radius: 100px;

            background: radial-gradient(circle at 50px 50px, #eeffff,#334455);
        }
        .div3 {
            width: 200px;
            height: 200px;
            border-radius: 100px;
  
            background: radial-gradient(circle at 50px 50px,#eeffff 0%, #666 70%, rgba(33,33,33,0.8) 80%);
        }
        .div4 {
            width: 200px;
            height: 200px;

            background: radial-gradient(ellipse at center, red, green, blue);
        }
        .div5 {
            width: 200px;
            height: 200px;
  
            background: radial-gradient(circle closest-side at center, red, green, blue);
        }
        .div6 {
            width: 200px;
            height: 100px;
    
            background: radial-gradient(circle at center, red, green, blue);
        }
        .div7 {
            width: 200px;
            height: 100px;
   
            background: radial-gradient(ellipse at center, red, green, blue);
        }

 （3）重复渐变效果： 利用repeating-linear-gradient或者repeating-radial-gradient设置。

　　示例：

　　　　　.div1 {
            width: 300px;
            height: 300px;
            background: repeating-radial-gradient(circle at center, red 0%, green 10%, pink 20%);
        }

　　　　　.div2 {
            width: 300px;
            height: 100px;
            margin-top: 20px;
            background: repeating-linear-gradient(45deg,#fff 0%, yellow 10%);
        }

css3--渐变

CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用CSS3渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看... 查看详情

css3渐变

今天做东西突然用到了渐变背景色，一时间突然想不起来了，就去菜鸟教程上看了看，重新学习了一下。CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用CS... 查看详情

利用css3渐变效果实现圆环旋转效果

*{margin:0;padding:0;}.stage{width:200px;height:130px;margin:100pxauto;position:relative;perspective:1300px;perspective-origin:100px-400px;}.stageul{list-style:none;width:100%;height:100%;}img{backfac 查看详情

第161天：css3实现兼容性的渐变背景(gradient)效果

CSS实现兼容性的渐变背景(gradient)效果一、有点俗态的开场白在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览... 查看详情

css3文字渐变无效果的解决方案

现在css3越来月流行了,为了实现一些高大上的效果,我们会用一些渐变的特效,请看文字渐变的特效代码:.title{font-size:60px;line-height:80px;text-align:center;margin-top:15%;-webkit-background-clip:text;background:linear-gradient(toright,red,blue);colo 查看详情

第22章css渐变效果

第22章CSS3渐变效果学习要点：1.线性渐变2.径向渐变本章主要探讨HTML5中CSS3背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。一．线性渐变CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在以前，这种... 查看详情

利用渐变实现书本的效果

如上图中间的那部分有点类似阴影的效果是用css3中的渐变（Gradients）来实现的结构:　　左边一个div，右边一个div。样式:　　左边一个背景为白色。　　右边的div设置渐变属性:  background:-webkit-linear-gradient(left,#dddddd,white);/... 查看详情

css3中的渐变

...时候我们能够看到顶栏上面的渐变类型如下第一个我们选中的是线性渐变，第二个是径向渐变，第三个是角度渐变，第四个是对称渐变，第五个是菱形渐变。对于css3并没有提供这么多的渐变类型，只提供了两种基本的渐变类型... 查看详情

使用css3线性渐变实现图片闪光划过效果

<pclass="overimg"><a><imgsrc="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a><iclass="light"></i></p>.overimg{position:relative;displa 查看详情

用css3实现带有阴影效果和颜色渐变的按钮

...属性box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片；本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=)：      首先是box-shados语... 查看详情

小tip:css3下的渐变文字效果实现——张鑫旭

...方法一：借助mask-image属性可以狠狠地点击这里：CSS3下的渐变文字效果方法一demo如果您手头上的浏览器是Chrome或是Safari，则您可以在demo页面中看到类似下面 查看详情

深入理解css3中的线性渐变

css3中的线性渐变线性渐变公式：background-image:linear-gradient([<angle>|<side-or-corner>]?,<color-stop>[,<color-stop>]+);意为：(角度deg或者方位词,一个或多个渐变颜色关键结点（多个的话用","隔开）);此种写法跟正则表达式类似... 查看详情

css3中如何实现渐变效果

CSS3里面的线性渐变：linear-gradient1、语法2、参数第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：第一个参数省略时，默认为“180deg”，等同于“to bottom”。第二个和第三个参数，表示颜色的起始点和... 查看详情

纯css3向右循环闪过效果

1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="utf-8">5<style>6.shadow{7text-align:center;8/*背景颜色线性渐变*/9/*老式写法*/10/*linear为线性渐变，也可以用下面的那种写法。lefttop，righttop指的是渐变方向， 查看详情

浅探css3渐变

css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介... 查看详情

浅探css3渐变

css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介... 查看详情

css3实现渐变背景

...linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。/*从上到下，蓝色渐变... 查看详情

css3渐变（gradients）

CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。渐变不是一个css属性，可以把它看成一个函数，通过传入参数（渐变方向和颜色）来返回一个视觉效果1.线型渐变linear-gradient基本用法:可以传入颜色值... 查看详情