侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

深入剖析CSS中的线性渐变linear-gradient

前端  /  管理员 发布于 7年前   162

在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性能。如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果。渐变实际上分为线性渐变和径向渐变两种,本文介绍线性渐变。

定义  

渐变实际上是两种或多种颜色之间的平滑过渡。而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡。渐变的实现由两部分组成:渐变线和色标。渐变线用来控制发生渐变的方向;色标包含一个颜色值和一个位置,用来控制渐变的颜色变化。浏览器从每个色标的颜色淡出到下一个,以创建平滑的渐变,通过确定多个色标可以制作多色渐变效果。

[注意]safari4-5、IOS3.2-4.3、android2.1-3只支持线性渐变,且需要添加-webkit-;safari5.1-6、IOS5.1-6.1、android4-4.3支持线性和径向渐变,且需要添加-webkit-;IE10+及其他高版本浏览器支持标准写法

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

 

渐变线  
渐变线从渐变框中心向两个方向进行拓展,起点和终点是渐变线与经过渐变框的一个角的垂直线的相交点

渐变的第一个参数用于指定渐变线,默认是to bottom。有两种方式指定渐变线方向

【1】使用角度

0deg表示沿着元素的中心线由下向上的方向(类似于y轴),且正角度表示顺时针旋转

[注意]对于-webkit-旧版本浏览器,如windows系统下的safari浏览器来说,0deg表示沿着元素中心线从左向右的方向(类似于x轴),且正角度表示逆时针旋转

所以-webkit-旧版本浏览器与标准浏览器的之间线性渐变的角度关系为

-webkit-浏览器 = 90deg - 标准浏览器
相当于-webkit-linear-gradient(90deg,red,blue) = linear-gradient(0deg,red,blue)

[注意]对于webkit内核的浏览器来说,使用javascript改变元素的样式。当带-webkit-的私有样式和不带-webkit-的标准样式同时存在的时候,并不一定是后面覆盖前面。所以如果两种写法产生的效果相同,但参数不同时,要使用浏览器识别来分别写不同的情况。

【2】使用关键字

CSS Code复制内容到剪贴板
  1. to top -> 0deg   
  2. to rightright -> 90deg   
  3. to bottombottom -> 180deg   
  4. to left -> -90deg(或270deg)   
  5. to top left -> -45deg(或315deg)   
  6. to top rightright -> 45deg   
  7. to bottombottom left -> -135deg(或225deg)   
  8. to bottombottom rightright -> 135deg  

[注意]window系统的safari浏览器并不支持'to'加方向的关键字,如to left。它只支持方向关键字,如left。当然了left 和 to left 方向是正好相反的

色标  
浏览器对于色标并没有默认值,且必须设置至少两个色标。色标由颜色和位置组成。颜色使用任何一种颜色模式都可以,而位置可以使用百分比或数值。

[注意]颜色的位置也可以设置负值

【1】必须是颜色在前,位置在后

JavaScript Code复制内容到剪贴板
  1. //正确   
  2. background-image: linear-gradient(red 0%,blue 100%);   
  3. //错误   
  4. background-image: linear-gradient(0% red,100% blue);  

 

【2】位置可以省略,浏览器默认会把第一个颜色的位置设置为0%,把最后一个颜色的位置设置为100%

JavaScript Code复制内容到剪贴板
  1. background-image: linear-gradient(red 0%,blue 100%);   
  2. //等价于上一个   
  3. background-image: linear-gradient(red,blue);  

【3】若渐变只有两种颜色,且第一个颜色的位置设置为n%,第二个颜色的位置设置为m%。则浏览器会将0%-n%的范围设置为第一个颜色的纯色,n%-m%的范围设置为第一个颜色到第二个颜色的过渡,m%-100%的范围设置为第二个颜色的纯色

CSS Code复制内容到剪贴板
  1. background-image: linear-gradient(red 30%,blue 60%);   
  2. //等价于上一个   
  3. background-image: linear-gradient(red 0%,red 30%,blue 60%,blue 100%);  

【4】若渐变颜色没有指定位置,则它们会均匀分布

CSS Code复制内容到剪贴板
  1. background-image: linear-gradient(red,yellow,green,blue);  

【5】若多色占据同一个位置,例a、b、c三色均占据n%这一位置,则0%-n%为前一种颜色与a颜色的颜色渐变;然后是n%-n%的a颜色与c颜色的颜色突变;n%-100%是c颜色与后一种颜色的颜色渐变。因此,中间的b是无用的

CSS Code复制内容到剪贴板
  1. background-image: linear-gradient(red,yellow 50%,white 50%,black 50%,blue);   
  2. //等价于上一个   
  3. background-image: linear-gradient(red,yellow 50%,black 50%,blue);  

重复渐变  
重复渐变可以实现线性渐变的重复效果,使色标在渐变线方向上无限重复,实现一些特殊的效果
[注意]只有当首尾两颜色位置不在0%或100%时,重复渐变才生效

CSS Code复制内容到剪贴板
  1. background-image: -webkit-repeating-linear-gradient(blue 20%,green 50%);   
  2. background-image: repeating-linear-gradient(blue 20%,green 50%);  

 

纸张效果

使用重复渐变可以实现横线纸张效果  

CSS Code复制内容到剪贴板
  1. div{   
  2.     height: 200px;   
  3.     width:200px;   
  4.     font: 14px/20px '宋体';   
  5.     text-indent: 2em;   
  6.     background-image: -webkit-repeating-linear-gradient(#f9f9f9,#f9f9f9 9%,#ccc 10%);   
  7.     background-image: repeating-linear-gradient(#f9f9f9,#f9f9f9 9%,#ccc 10%);   
  8. }  

我是特别长的特别长的特

别长的特别长的特别长的特别长的特

别长的特别长的测试文字

 多背景

使用多背景属性,利用带有透明度的渐变颜色给图片添加渐变的透明效果

CSS Code复制内容到剪贴板
  1. background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8)),url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif');  

应用场景  

在CSS样式中,渐变相当于背景图片,在理论上可在任何使用url()值的地方采用。比如最常见的background-image、list-style-image以及border-image。但目前为止,仅在背景图片中得到完美的支持

【1】background-image

CSS Code复制内容到剪贴板
  1. background-image: -webkit-linear-gradient(pink,lightblue,lightgreen);   
  2. background-image: linear-gradient(pink,lightblue,lightgreen);  

[注意]渐变框的大小由background-size决定,默认是padding box

【2】list-style-image

CSS Code复制内容到剪贴板
  1. list-style-image: -webkit-linear-gradient(red,blue);   
  2. list-style-image: linear-gradient(red,blue);   
  3. font-size: 50px;  

[注意]渐变框的大小由font-size决定,默认是1em

[注意]firefox不支持在list-style-image中设置

  • 我是文字
  • 【3】border-image

    CSS Code复制内容到剪贴板
    1. -webkit-border-image:  -webkit-linear-gradient(black,green) 1/10px;       
    2. border-image:  linear-gradient(black,green) 1/10px;  

    [注意]渐变框的大小由borer-width决定,safari浏览器始终实现的都是带有fill参数的表现

    IE兼容  

    IE9-浏览器并不支持该属性,但可以使用IE准专有的滤镜语法来实现兼容

    CSS Code复制内容到剪贴板
    1. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#color', endColorstr='#color');GradientType代表渐变线方向,0为垂直(默认),1为水平   
    2. #color代表色标,格式是#aarrggbb,其中aa为透明度,rrggbb为rgb模式的颜色   
    3. startColorstr的默认值是#ff0000ff    
    4. endColorstr的默认值是#ff000000  

    [注意]由于IE滤镜只支持首尾两个位置,且方向只可以为垂直和水平,所以有很大的局限性

    CSS Code复制内容到剪贴板
    1. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');  

    以上这篇深入剖析CSS中的线性渐变linear-gradient就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

    原文地址:http://www.cnblogs.com/xiaohuochai/archive/2016/04/12/5370446.html


  • 上一条:
    使用CSS实现小三角形效果【附实例】
    下一条:
    css 字体单位之间的区分以及字体响应式的实现详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客