css线性渐变linear-gradient 参数讲解以及示例

2024-04-15 14:07:55

linear-gradient(direction, color-stop1, color-stop2, ...) 用于创建一个表示两种或多种颜色线性渐变的图片。

direction

用角度值指定渐变的方向（或角度），可省略，

默认to bottom/ 180deg / .5turn

color-stop1, color-stop2,...

用于指定渐变的起止颜色。 [ | ]

1、direction

渐变角度A: 如果 C 是渐变框的中心点，则 A 是穿过 C 的垂直线与同样穿过 C 且渐变色停止点分布的渐变线之间的夹角。

图示为角度与方向之间的关系，有个例外是顶角关键词，例如 to top right，不一定是45deg，与元素的尺寸有关系

如果linear-gradient使用顶角关键词时（to top right、to top left、to bottom right和to bottom left），渐变线首先通过元素中心点并且与顶点垂直相交，与中心点垂直线构成的夹角才是渐变角度

2、 color

第一个颜色将被放置在渐变线0%位置（渐变线开始位置），最后一个颜色将被放置在100%位置处

3、一些示例

(1)网格线

background: #c3db14;
background-image: linear-gradient(#925988 2rpx, transparent 0), linear-gradient(90deg, #925988 2rpx, transparent 0);
background-size: 40rpx 40rpx, 40rpx 40rpx;

(2)缺角矩形

.box{ width: 120px; height: 80px; background: linear-gradient(135deg, transparent 10px, #2baaca 0); //左上缺角矩形 /* 一定要先画小三角，再画缺角矩形，否则矩形会盖住小三角 */ background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4rem 1.4rem, linear-gradient(-135deg, transparent 1rem, #2baaca 0); //右上折角矩形
}

4、Ref：

参数相关：https://patrickbrosset.medium.com/do-you-really-understand-css-linear-gradients-631d9a895caf#.dv10lwqw9

缺角折角矩形：CSS3实现缺角矩形，缺角边框以及折角矩形_hst❀的博客-CSDN博客_css长方形缺三角样式

css线性渐变linear-gradient 参数讲解以及示例相关推荐

html垂直线性渐变,CSS线性渐变垂直和水平渐变linear-gradient
CSS线性渐变 .test1{ width: 200px; height: 80px; text-align: center; line-height: 80px; margin-bottom: 10 ...
兼容IE与firefox的css 线性渐变（linear-gradient）
IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F90 ...
深入理解CSS线性渐变linear-gradient
前面的话在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性能.如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果.渐变实际上分为线性渐变和径向渐变两种,本文介绍线性 ...
CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
html边框颜色线性渐变,CSS线性渐变linear-gradient() 函数实现div边框四角样式
先看下要实现的效果. 四个角边框高亮 css代码实现红色框box-red样式,蓝色的只是变换了颜色.box-title是图上渐变实现. .box-red { background: linear-g ...
html中背景条纹效果,使用CSS线性渐变制作条纹背景
主要使用的属性 linear-gradient background:linear-gradient(#000,#ccc); Paste_Image.png 取消中间的渐变过度 background: ...
CSS如何设置自定义渐变色? 线性渐变篇
CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡. CSS定义了三种渐变类型: Linear Gradients (goes down/up/left/right/diagonally) 下 ...
css中的渐变的属性,CSS3 渐变属性（Gradients）-线性渐变(linearGradient)
通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 丛本质上来说,既然 bac ...
【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )
文章目录一.LinearGradient 线性渐变渲染 1.设置 2 个颜色的渐变 3.设置多个颜色的渐变二.LinearGradient 线性渐变渲染重要参数分析 1.正常渲染 2.设置多个渐变 ...

最新文章

热门文章