css渐变色之线性渐变
目录
1.线性渐变
2.径向渐变
1、线性渐变
线性渐变使用linear-gradient，语法如下：
background-image: linear-gradient(渐变方向, 颜色1[位置1], 颜色2[位置2], 颜色3[位置3]...);
1渐变方向有以下几种值：
使用表示方位的单词
to top 表示从下往上的方式进行渐变
to bottom 表示从上往下的方式进行渐变
to right 表示从左往右的方式进行渐变
to left 表示从右往左的方式进行渐变
to top left 表示从右下向左上进行渐变(top和left可以交换位置，下同)
to top right 表示从左下向右上进行渐变
to bottom left 表示从右上向左下进行渐变
to bottom right 表示从左上向右下进行渐变
使用角度表示，例如0deg等同于to top， 90deg等同于to right
使用弧度，单位为rad
使用turn，代表环绕圆圈的圈数，0.5turn表示半圈，也就是180deg
使用grad，表示百分度，400grad表示360deg
background-image: linear-gradient(to top, red, green);
background-image: linear-gradient(to bottom, red, green);
background-image: linear-gradient(to left, red, green);
background-image: linear-gradient(to right, red, green);
background-image: linear-gradient(to left top, red, green);
background-image: linear-gradient(to left bottom, red, green);
background-image: linear-gradient(to right top, red, green);
background-image: linear-gradient(to right bottom, red, green);
background-image: linear-gradient(45deg, red, green);
background-image: linear-gradient(90deg, red, green);
background-image: linear-gradient(1.57rad, red, green);/*0.5π*/
background-image: linear-gradient(0.5turn, red, green);
background-image: linear-gradient(200grad, red, green);
可以给每种颜色设置位置(可以使用百分比，像素，em等)，如下：
background-image: linear-gradient(to right, red 30%, green);
background-image: linear-gradient(to right, red 60%, green);
background-image: linear-gradient(to right, red 50px, green);
background-image: linear-gradient(to right, red, red 30%, green 30%, green 60%, blue 60%, blue);
section {width: 400px;height: 1em;margin-top: 10px;border-radius: .3em;background-image: repeating-linear-gradient(-45deg, red, red 10%, green 10%, green 20%);
}
css渐变色之线性渐变相关推荐
- CSS：使用线性渐变实现标签右上角三角形角标效果/HTML上标、下标
需求描述 想要实现标签右上角带有三角形角标的效果,且不希望使用图标或新建div实现角标效果,效果如图: 实现思路 可以将标签右上角的三角形角标理解为与主体颜色不同的背景色,由此想到:可以使用线性渐变实 ...
- html5彩虹色填充,使用css技术的线性渐变来设计彩虹
在网页设计中,有时候会需要用到渐变效果,渐变可以创建出类似于彩虹的视觉图案效果,在没有CSS3之前,为了显示一个渐变需要专门制作一个图片,这种不法不但不灵活还增加请求数,而CSS3可以轻松实现网页渐变 ...
- CSS 的 linear-gradient() 线性渐变函数（带例子）
一.CSS中的 linear-gradient() 函数: 1.定义与用法:(定义部分取自菜鸟教程) linear-gradient() 函数用于创建一个线性渐变的" 图像 ". ...
- CSS应用：线性渐变
渐变是从一种颜色逐渐蜕变到另一种颜色.线性渐变就是沿着一根轴线(水平.垂直或某个角度)改变颜色,从起点到终点颜色进行顺序渐变. 在这里,我将介绍在CSS中怎么实现线性渐变的方法. 线性渐变 创建线性渐 ...
- CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient
文章目录 前言 普通渐变 条纹 条纹重复 虚线 斜向条纹 三角形 进度条动画 progress 网格 圆点阵列 波点图案 前言 本文主要介绍linear-gradient的使用方法,既有普通的用法,也 ...
- CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法 总结 1.线性渐变 1.1.什么是线性渐变 线性渐变,顾名思义就是 ...
- html5线性渐变方向,使用canvas来完成线性渐变和径向渐变的功能的方法示例
fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色. 线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数. 第一步 : 使用一个新的函数createL ...
- CSS如何设置自定义渐变色? 线性渐变篇
CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡. CSS定义了三种渐变类型: Linear Gradients (goes down/up/left/right/diagonally) 下 ...
- HTML5圆形线性渐变,css中linear-gradient()函数是干什么的？实现线性渐变的圆形边框（代码）...
在前端开发过程中,有时会利用linear-gradient实现各种各样的效果,本章给大家介绍css中linear-gradient()函数是干什么的?实现线性渐变的圆形边框(代码).有一定的参考价值, ...
最新文章
- Linux帮助使用方法详解
- Engineering：王军和张发明组发表人体肠道菌群的原位重建及昼夜节律的研究
- 网站响应慢的原因分析
- eclipse 启动tomcat， java.lang.ClassNotFoundExcepti
- Eclipse开发struts完全指南
- 炒冷饭系列：设计模式 装饰模式
- Redis进阶-bind参数详解
- BM39 序列化二叉树
- 转载--让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范
- 数据库系统原理（第5章：数据库编程）
- Java学习之数据库中的范式和反范式
- DLL/OCX文件的注册与数据执行保护DEP
- NORDIC 52832开发2之串口空闲时间过长
- 教你如何将二进制文件导入到数据库
- 浅谈一下session问题
- zpf框架的business使用方法
- 安装MinGW-W64提示cannot download repository.txt
- 转：免杀技术经验总结[20081215更新]
- 大型高并发网站之查询性能优化（综合篇）
- CF #683 div.2