CSS3之线性渐变(linear-gradient)

渐变包含两种:线性渐变和径向渐变,这里主要对线性渐变进行详细的讲解,下一篇详解径向渐变。

考虑到浏览器兼容性,线性渐变包含带有内核和不带内核的两种写法,也就导致了语法的多样性,下面会对不同语法进行一个总结。

不同浏览器有不同内核,针对不同浏览器设置一些样式的时候,我们需要加上其对应内核。在最后可以加上通用的写法。
火狐:moz
谷歌,safari: webkit
opera:op
ie:ms

1 首先我们看看带有内核的语法,这里以webkit为例,其它的内核都是一样的语法。

(带内核)线性渐变:
    语法:
      -webkit-linear-gradient(方向,颜色 位置,颜色 位置);
    示例:
      background: -webkit-linear-gradient(90deg,red 40%,yellow 50%,green 80%);  
    参数解析: 
    其中位置的百分比指的是颜色结束渐变的位置。
    方向取值:top,bottom left等/0deg(如果不写默认为270deg/top),方向前面不要加to。

带内核代码:

.a{
/*  从0到40%为红色,40%到50%为红色到黄色的渐变,50%到80%为黄色到绿色的渐变,80%到100%为绿色  */
       background: -webkit-linear-gradient(90deg,red 40%,yellow 50%,green 80%);                 
/*  background: -webkit-linear-gradient(left bottom,red 40%,yellow 50%,green 80%);   */
/*  background: -webkit-linear-gradient(top,red 40%,yellow 50%,green 80%);   */             
}

三种效果图分别如下:

对比图.png

2 线性渐变的通用写法(不带内核的线性渐变)

(不带内核)线性渐变
    语法:
      -webkit-linear-gradient(方向,颜色 位置,颜色 位置);
    示例:
      background: linear-gradient(to top,white 0%,red 100%);
    参数解析:
      方向:如果是采用left等英语单词需要加to,表示到哪里结束。
        如果采用角度,不需要加to。

不带内核代码

.b{
/*   background: linear-gradient(300deg,white 0%,red 100%);  */
        background: linear-gradient(to left bottom,white 0%,red 100%);
}

两种效果图对比如下:


对比图2.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • -webkit-linear-gradient线形渐变详解 CSS3发布很久了,现在在国外的一些页面上常能看到他的...
    魏魏魏_1500阅读 15,644评论 0 3
  • 知识点: CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变 渐变(gradients)可以在两个...
    越IT阅读 1,143评论 0 3
  • 简介 - Introduction 渐变在网站中常常用到:如果你想使得(按钮,标题等)有生气,就可以使用渐变。虽然...
    花括弧阅读 950评论 0 0
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,658评论 0 7
  • 这是一本贝加而湖推荐的书,今天刚收到,忙完其它事情后,急切想一睹为快,探探书中到底如何解释,阐述爱与孤独。 时间有...
    Ms窝阅读 242评论 0 0