【CSS】线性渐变属性值及范例详解
渐变色函数的结果属于
<gradient>
数据类型,是一种特别的<image>
数据类型,所以渐变色只能被用于<image>
可以使用的地方
linear-gradient()
线性渐变
语法
linear-gradient( <angle>
| <side-or-corner>
, <color-stop-list>
, ?<color-hint>
)
<angle>
用角度值指定渐变的方向(或角度)。角度顺时针增加。
<side-or-corner>
描述渐变线的方向,默认方向为自上之下。它包含to和两个关键词:第一个指出水平位置left or right,第二个指出垂直位置top or bottom。关键词的先后顺序无影响,且都是可选的。to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。
<color-stop-list>
包括一个颜色值及可选的终点位置(从何时开始渐变)
颜色值
颜色值支持16进制颜色、颜色关键字(red)、rgb()
、rgba()
、transparent
终点位置
定义当前色值从渐变轴的何处开始渐变,可以是一个百分比值或**<length>
**
<color-hint>
颜色沿着渐变轴的方向颜色变化顺序为:颜色1
— 完全融合
— 颜色2
定义渐变中点,就是定义两个颜色完全融合的位置。设置在两个颜色值之间(注意与颜色终点不同,需要用逗号分隔)
范例
角度
默认从上到下
background-image:linear-gradient(rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));
方向与角度相通
to right
等价于90deg
等价于450deg
等同于-270deg
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));
开始渐变位置
- 红色从渐变轴的50%开始渐变
可以看到50%的位置有一条明显的线,红色部分从这里开始进行渐变
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 255, 1));
- 蓝色部分从渐变轴的80%结束渐变(蓝色是结束颜色)
与上图进行对比可以发现渐变效果发生在渐变轴的50%位置与80%位置之间
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 255, 1) 80%);
定义渐变中点(完全融合位置)
默认为两个颜色变化开始到结束的中点
把渐变范围定义到30%到70%之间,此时的渐变中点就是50%(50%是30%到70%的中点),这时候渐变中点的取值范围为 (30%,70%)
,不能取两端的值,超出范围时实际效果为颜色之间变化,没有渐变效果
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 30%, rgba(0, 0, 255, 1) 70%);
- 手动定义中点
中点设置为40%,即在渐变轴的40%处实现完全融合
background-image:linear-gradient(90deg, rgba(255, 0, 0, 1) 30%, 40%, rgba(0, 0, 255, 1) 70%);
多个渐变效果
存在多个渐变函数时会同时生效,后面生成的图形会叠加在前面生成图形之上
附上MDN的例子~~~
background: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
注意
- 设置的百分比值、长度值都是相对于渐变起点进行设置
- 可以设置多个渐变函数,后面的会叠加在上面
【CSS】线性渐变属性值及范例详解相关推荐
- php渐变背景颜色,css背景颜色渐变案例:线性渐变和径向渐变效果实例详解
渐变是两种或多种颜色之间的平滑过渡.以前,必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好, ...
- CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法 总结 1.线性渐变 1.1.什么是线性渐变 线性渐变,顾名思义就是 ...
- html垂直线性渐变,CSS线性渐变 垂直和水平渐变linear-gradient
CSS线性渐变 .test1{ width: 200px; height: 80px; text-align: center; line-height: 80px; margin-bottom: 10 ...
- css calc 计算属性值
css calc 计算属性值 definition The calc() CSS function lets you perform calculations when specifying CSS ...
- CSS中position属性值有哪些?
CSS中position属性值有哪些? 1.position:relative;相对定位 1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性) 2> 不会使元素脱离文档流( ...
- vue 子级拿值_vue 父组件通过$refs获取子组件的值和方法详解
前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中 ...
- html+css+javascript实现小游戏2048(详解,附源代码)
html+css+javascript实现小游戏2048(详解,附源代码) 1.上下左右的移动原理相同,这里只详细说明向上移动的方法 2.这里的上下左右由wasd四个键控制 3-小方块空的意思就是没数 ...
- html标签的下一级遍历,jquery属性,遍历,HTML操作方法详解
Jquery属性遍历.HTML操作. Jquery拥有可操作HTML元素和属性的强大方法. 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中. .andSelf() ...
- css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
最新文章
- 基建狂魔:硬核技术之隔绝厌氧菌的涂料
- 开发常见错误解决(7)连接到SQL Server 2005出错
- WebRTC 的传输协议
- 蓝桥杯 试题 基础练习 特殊回文数——16行代码AC
- 作者:高丰,英国南安普敦大学计算机博士,现为开放数据与创新独立咨询顾问,兼复旦大学数字与移动治理实验室特邀研究员。...
- java 数组 算法_常见算法总结 - 数组篇
- 关于Tuxera NTFS mac还有你不知道的用法!教程来啦!
- ios开发之CoreData使用
- Linux系统如何添加IP别名
- 群晖nas存储系统原理_群晖NAS入门教程第四节:群晖存储空间管理员功能和磁盘阵列类型的简介...
- matlab傅里叶变换处理图像,MATLAB数字图像处理(1)基本操作和傅里叶变换
- 魔域来袭H5游戏源码
- 英汉汉英词典,牛津高级词典,电子词典,离线英汉,汉英词典的使用方法
- diskgenius克隆硬盘无法启动_GPT WIN 换硬盘 硬盘克隆或复制 无法确定的问题,硬盘大小不一致换系统。...
- rounding mode
- 【考研经验】中国科学技术大学软件学院考研经历及复试回忆
- 微信卡券怎么制作以及卡券封号推送消息技术分享
- IDEA中怎么调出右下角的版本控制Git
- linux系统能看抖音吗,用电脑如何刷抖音?电脑刷抖音方法你知多少
- 无线渗透之WiFi密码的监听