首页 > 开发 > CSS > 正文

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

2024-07-11 08:29:46
字体:
来源:转载
供稿:网友

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。
线性渐变在Webkit下的应用

CSS Code复制内容到剪贴板
  1. -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法  

    第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。
    第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left
    top(左上角)和left bottom(左下角)。
    第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

线性渐变在Mozilla下的应用

语法:

CSS Code复制内容到剪贴板
  1. -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )  

参数:

    其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left
    top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。


css3中实现了背景渐变

CSS Code复制内容到剪贴板
  1. <gradient> = [        <linear-gradient> | <radial-gradient> |   
  2.     <repeating-linear-gradient> | <repeating-radial-gradient> ]  

一:线性渐变  

 在CSS3中,可以使用 linear-gradient实现背景线性渐变。

CSS Code复制内容到剪贴板
  1. <linear-gradient> = linear-gradient(  [ [ <angle> | to <side-or-corner> ] ,]?   <color-stop>[, <color-stop>]+ )  <side-or-corner> = [left | rightright] || [top | bottombottom]  

在ff浏览器时需要将样式代码书写成"-moz-linear-gradient",chrome浏览器时需要写成"-webkit-linear-gradient"的形式。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表