CSS小课堂之线性渐变

使用 background-image: linear-gradient(); 来创建线性渐变。

语法

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

例子

知道你看不懂语法,直接上例子。

  • 最简单的双色值渐变,渐变方向默认向下:background-image: linear-gradient(#cdf0ff, #0ca0e9);
  • 指定渐变方向,向上:background-image: linear-gradient(to top, #cdf0ff, #0ca0e9);
  • 指定渐变角度,顺时针45度:background-image: linear-gradient(45deg, #cdf0ff, #0ca0e9);
  • 指定颜色起始停靠点:background-image: linear-gradient(#cdf0ff 0%, #0ca0e9 10%);
  • 指定三种颜色:background-image: linear-gradient(#0ca0e9, #cdf0ff, #0ca0e9);
snipaste_20170627_133701.png

参考

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

推荐阅读更多精彩内容

  • -webkit-linear-gradient线形渐变详解 CSS3发布很久了,现在在国外的一些页面上常能看到他的...
    魏魏魏_1500阅读 15,624评论 0 3
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,489评论 2 45
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,791评论 0 2
  • 杨平厦门小微洗护产业11月29日清 [太阳]学习内容: 1. 天宝店产品知识讲解: 纤见,双子,幂级云裳,欧卡,浣...
    深笑567阅读 267评论 0 0
  • 最近工作中,因为重试按钮后台反应比较慢。用户一直点,我就一直提交到外部系统了。导致了一个重复提交问题。虽然不一定有...
    元勰阅读 612评论 0 0