用于背景颜色渐变或画线条等场景

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从下到上渐变。

/* 从上到下,蓝色渐变到红色 */
linear-gradient(blue, red); /* 渐变轴为45度,从蓝色渐变到红色 */
linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red); /* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

/* 从右下角到左上角方向渐变 */
background-image: -moz-linear-gradient( -45deg, rgb(149,112,241) 0%, rgb(101,143,243) 100%);
background-image: -webkit-linear-gradient( -45deg, rgb(149,112,241) 0%, rgb(101,143,243) 100%);
background-image: -ms-linear-gradient( -45deg, rgb(149,112,241) 0%, rgb(101,143,243) 100%);

从X轴正方向逆时针为正方向,顺时针为负deg

https://www.runoob.com/cssref/func-linear-gradient.html

CSS linear-gradient() 函数的更多相关文章

  1. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  2. css text gradient color, css fonts gradient color

    css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...

  3. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

  4. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  5. css中var函数

    引言: 在学习elementui的时候看到一个var.css, 其中写的全部都是以--开头的属性,上google查询不是css3新增的属性,于是决定一探究竟 :root { /* Transition ...

  6. jQuery CSS 的操作函数

    jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...

  7. css 1) calc() 函数的使用. 2)box-sizing:border-box

    calc() 是一个css 函数, 可以实现.计算 ---------------------------- 1. 每个div宽度是25%; 总共4个div. 同时 前三个div 有 border-r ...

  8. CSS 中 calc() 函数用法

    CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...

  9. sublime text 格式化html css 与显示函数列表

    sublime 格式化html css 1.ctrl + shift + p 2.输入install package,选择install package 3.输入:HTML-CSS-JS Pretti ...

  10. javascript 一些关于css操作的函数

    // 通过样式表 获得css样式 //obj 表示dom对象,name 表示css属性 比如width等 function getStyle(obj,name){ if(obj.currentStyl ...

随机推荐

  1. RadioButton 自定义样式(带动画)

    <Style x:Key="Radbtn" TargetType="{x:Type RadioButton}"> <Setter Proper ...

  2. SpringMVC学习08(拦截器)

    8.拦截器 概述 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理.开发者可以自己定义一些拦截器来实现特定的功能. 过滤器与拦截器的区别: ...

  3. S3C2440—10.代码重定位

    文章目录 一.启动方式 1.1 NAND FLASH 启动 1.2 NOR FLASH 启动 二. 段的概念 2.1 重定位数据段 2.2 加载地址的引出 三.链接脚本 3.1 链接脚本的引入 3.2 ...

  4. SQL 练习12

    查询和" 01 "号的同学学习的课程 完全相同的其他同学的信息 分析 如果某同学学的某一个课程和01同学所学的课程有对应,那么子查询返回false. 如果没有对应,子查询返回tru ...

  5. Nodejs koa2读取服务器图片返回给前端直接展示

    参考:https://blog.csdn.net/lihefei_coder/article/details/105435358 const fs = require('fs'); const pat ...

  6. 【springboot】validator枚举值校验

    转自: https://blog.csdn.net/aiyaya_/article/details/78588200 一.前言 在spring项目中,校验参数功能使用hibernate validat ...

  7. 使用git下载码云仓库文件步骤总结

    从码云下载文件的两种方式(私服时) 1.让私服管理者复制链接,然后你加入私服: 2.生成公钥,让私服管理者添加你的公钥. 在eclipse中找到git,输入自己的登录账号和密码,下载文件到本地仓库,然 ...

  8. ASP.Net Core Web Api 使用 IdentityServer4 最新版 踩坑记录

    辅助工具 日志追踪包 : Serilog.AspNetCore 源码查看工具 : ILSpy 项目环境 ###: ASP.NetCore 3.1 IdentityServer4 4.0.0+ 主题内容 ...

  9. 使用Operator State方式

    使用 operator state的方式有以下几种: 方式一: stateful function(RichFunction) 实现 CheckpointFunction 接口 必须实现两个方法:Vo ...

  10. Go初始化二维数组

    初始化二维数组 var a = make([][]int, n) for i := 0; i < n; i++ { a[i] = make([]int, n) }