css3-制作渐变

原创 2015年07月09日 14:05:11

  先了解一下目前的几种现代浏览器的内核,主流内容主要有

  Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器)-moz-

  WebKit(熟悉的有Safari、Chrome等浏览器)-webkit-

  Opera(presto)(Opera浏览器)-O-

  Trident(IE浏览器)。

》线性渐变(linear)

第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:



第一个参数省略时,默认为“270deg”,等同于“to bottom”。

第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

可以结合透明度使用

eg:background:linear-gradient(to left, red,yellow,green,blue,indigo,violet);

效果图:


兼容性:

IE依靠滤镜实现渐变

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";

(startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为默认值,表示垂直渐变,1表示水平渐变)

加上内核前缀-moz-,-webkit-,-o-

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));//webkit老版引擎的写法

eg:

background: -moz-linear-gradient(left#ace#f96 5%, #ace#f96 95%, #ace);
background: -webkit-gradient(linearleft topright topfrom(#ace), color-stop(0.05#f96), color-stop(0.5#ace), color-stop(0.95#f96), to(#ace)); //color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

background: -webkit-linear-gradient(left#ace#f96 5%, #ace#f96 95%, #ace);

background: -o-linear-gradient(left#ace#f96 5%, #ace#f96 95%, #ace);//颜色值后面的参数表起点与终点的位置




》径向渐变(radial)径向渐变到目前还不支持Opera的内核浏览器

径向梯度允许指定渐变的形状(圆形circle或椭圆形 ellipse)和大小(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。 

closest-side:渐变由起点到最近边决定

closest-corner:渐变由起点到最近角决定

 farthest-side:渐变由起点到最远边决定

farthest-corner:渐变由起点到最远角决定

contain:渐变由起点到最近边决定
 

》重复渐变的应用

.repeat1{ //以火狐为例

    background:-moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);}
.repeat2{

    background:-moz-repeating-linear-gradient(-45deg,#ace, #ace 5px, #f96 5px,#f96 10px);}
.repeat3{
 
 background:-moz-repeating-linear-gradient(0deg,#ace 0px, #ace 5px, #f96 5px,#f96 10px);}

 



.repeat4{
  background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
     -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
     -moz-linear-gradient(45deg, transparent 75%, #555 75%),
     -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
}
.repeat5{
     background-image:-moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%),
     -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%);
}

实际出来的效果


加上

div{

-webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  background-size: 20px 20px;

}
后,控制背景图片的大小,从而达到重复的效果

版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS3重复渐变(线性和径向渐变)

重复渐变的基本语法、利用重复渐变制作记事本纸张效果、纹理背景图以及个人注意到的平滑过渡渐变和突然过渡渐变!...
  • macanfa
  • macanfa
  • 2016年07月08日 08:29
  • 2575

9种样式CSS3 渐变按钮集

一款多风格、多样式的CSS3 3D渐变按钮,一共有9款不同的颜色风格,未使用任何的JS代码和图片,即使在不支持CSS3的IE8浏览器中,虽然看不到3D和按钮背景效果,但按钮的颜色渐变效果同样是十分漂亮...
  • life66881
  • life66881
  • 2015年06月10日 12:32
  • 1068

文字颜色渐变与动画原理(仅webkit)

我们经常希望我们制作的网站充满生气,那就需要动画来点缀。而网页的标题往往是做文章的好地方。 可能你对于制作一张渐变背景图比较熟悉了,但是不知道字体颜色如何使用渐变色来代替? 下面就展示一种...
  • hugh77
  • hugh77
  • 2015年02月03日 12:02
  • 1863

使得IE支持CSS3 圆角阴影 渐变

  • 2016年09月23日 09:42
  • 26KB
  • 下载

用a作登陆按扭的实现代码+css3 按钮简单10种颜色线性渐变web buttons网页按钮

  • 2015年08月24日 04:32
  • 5KB
  • 下载

超炫酷的CSS3进度条动画 背景色渐变

  • 2017年07月04日 10:50
  • 43KB
  • 下载

CSS3横向纵向颜色渐变动画菜单

  • 2013年07月10日 17:40
  • 4KB
  • 下载

ie8兼容html5 css3圆角阴影渐变placeholder等属性

  • 2015年01月21日 13:15
  • 56KB
  • 下载

使用CSS3线性渐变(linear-gradient)实现文本波浪线效果

我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受。 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整。 比如你只是想调...
  • iefreer
  • iefreer
  • 2016年03月13日 18:48
  • 10483

css3之线性渐变

渐变图像 线性渐变linear-gradient() 第一个参数: 可不写, 默认值为to bottom (即180%), 用来指定渐变的方向, 可是是具体的角度值, 也可以直接指定方位to lef...
  • jx950915
  • jx950915
  • 2018年01月06日 12:23
  • 43
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3-制作渐变
举报原因:
原因补充:

(最多只允许输入30个字)