CSS linear-gradient() 函数
用于背景颜色渐变或画线条等场景
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() 函数的更多相关文章
- FCC---Create a Gradual CSS Linear Gradient
Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...
- css text gradient color, css fonts gradient color
css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...
- CSS技巧-rgba函数的妙用
先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...
- CSS border gradient color All In One
CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...
- css中var函数
引言: 在学习elementui的时候看到一个var.css, 其中写的全部都是以--开头的属性,上google查询不是css3新增的属性,于是决定一探究竟 :root { /* Transition ...
- jQuery CSS 的操作函数
jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...
- css 1) calc() 函数的使用. 2)box-sizing:border-box
calc() 是一个css 函数, 可以实现.计算 ---------------------------- 1. 每个div宽度是25%; 总共4个div. 同时 前三个div 有 border-r ...
- CSS 中 calc() 函数用法
CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...
- sublime text 格式化html css 与显示函数列表
sublime 格式化html css 1.ctrl + shift + p 2.输入install package,选择install package 3.输入:HTML-CSS-JS Pretti ...
- javascript 一些关于css操作的函数
// 通过样式表 获得css样式 //obj 表示dom对象,name 表示css属性 比如width等 function getStyle(obj,name){ if(obj.currentStyl ...
随机推荐
- RadioButton 自定义样式(带动画)
<Style x:Key="Radbtn" TargetType="{x:Type RadioButton}"> <Setter Proper ...
- SpringMVC学习08(拦截器)
8.拦截器 概述 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理.开发者可以自己定义一些拦截器来实现特定的功能. 过滤器与拦截器的区别: ...
- S3C2440—10.代码重定位
文章目录 一.启动方式 1.1 NAND FLASH 启动 1.2 NOR FLASH 启动 二. 段的概念 2.1 重定位数据段 2.2 加载地址的引出 三.链接脚本 3.1 链接脚本的引入 3.2 ...
- SQL 练习12
查询和" 01 "号的同学学习的课程 完全相同的其他同学的信息 分析 如果某同学学的某一个课程和01同学所学的课程有对应,那么子查询返回false. 如果没有对应,子查询返回tru ...
- Nodejs koa2读取服务器图片返回给前端直接展示
参考:https://blog.csdn.net/lihefei_coder/article/details/105435358 const fs = require('fs'); const pat ...
- 【springboot】validator枚举值校验
转自: https://blog.csdn.net/aiyaya_/article/details/78588200 一.前言 在spring项目中,校验参数功能使用hibernate validat ...
- 使用git下载码云仓库文件步骤总结
从码云下载文件的两种方式(私服时) 1.让私服管理者复制链接,然后你加入私服: 2.生成公钥,让私服管理者添加你的公钥. 在eclipse中找到git,输入自己的登录账号和密码,下载文件到本地仓库,然 ...
- ASP.Net Core Web Api 使用 IdentityServer4 最新版 踩坑记录
辅助工具 日志追踪包 : Serilog.AspNetCore 源码查看工具 : ILSpy 项目环境 ###: ASP.NetCore 3.1 IdentityServer4 4.0.0+ 主题内容 ...
- 使用Operator State方式
使用 operator state的方式有以下几种: 方式一: stateful function(RichFunction) 实现 CheckpointFunction 接口 必须实现两个方法:Vo ...
- Go初始化二维数组
初始化二维数组 var a = make([][]int, n) for i := 0; i < n; i++ { a[i] = make([]int, n) }