【js/css】渐变色linear-gradient简明教程

最新推荐文章于 2024-07-25 17:18:17 发布
最新推荐文章于 2024-07-25 17:18:17 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： js/css 文章标签： vue.js javascript provide
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangbai01_/article/details/121377299
版权

经常的一些使用

注意这个角度是顺时针旋转的，
初始是竖直，颜色从下到上

(1)角度0，颜色方向是竖直从下到上
在这里插入图片描述

background:linear-gradient(0deg, red 0%, blue 100%);

(2)角度为90，颜色顺时针旋转，变为水平从左到右
所以90度是从左到右的在这里插入图片描述

background:linear-gradient(0deg, red 0%, blue 100%);

(3)角度为180，颜色顺时针旋转，变为竖直从上到下
所以180度是从上到下的
在这里插入图片描述

background:linear-gradient(0deg, red 0%, blue 100%);

总结：
比较常用的是90deg水平，和180deg从上到下
但是我们只要记住从下到上的初始状态和顺时针旋转方向，任意变化都可以

当白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 渐变背景 之 线性渐变 linear-gradient
CyberPlayer的博客
02-28 7274
CSS 渐变 可以显示两种或多种指定颜色之间的平滑过渡。 CSS 定义了两种渐变类型： 线性渐变（向下/向上/向左/向右/对角线） 径向渐变（由其中心定义） 这里先讲线性渐变 线性渐变 语法： background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 线性渐变 - 从上到下（默认） 下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色： #grad { backgrou
CSS3线性渐变linear-gradient
XUYIGE的博客
11-20 866
渐变就是从一种颜色过渡到另一种颜色的填充过程，两种颜色相交时会进行混合，渐变的类型有两种： 1、线性渐变（linear）：通过linear-gradient函数定义 2、径向渐变（radial）：通过radial-gradient函数定义 语法： 线性渐变：background：linear-gradient（方向，颜色，…) 重复线性渐变：repeating-linear-gradient（方向...
有意思的Js可拖动的渐变色角度选择器 Javascript模拟出的角度选择器，拖动这个简洁的滑块，会改变渐变色的角度，本代码有两个亮点：一个是滑块的拖动，别一个则是渐变色的实现，这两者的结合必然形成独特的代码
03-08
有意思的Js可拖动的渐变色角度选择器 Javascript模拟出的角度选择器，拖动这个简洁的滑块，会改变渐变色的角度，本代码有两个亮点：一个是滑块的拖动，别一个则是渐变色的实现，这两者的结合必然形成独特的代码
JavaScript 绘制线性渐变
热门推荐
mrlal
06-15 13万+
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <canvas id="myCanvas" width="300" height="200"></canvas> <script t...
使用JS中的DOM操作完成背景颜色渐变方向变换。
最新发布
2303_81782041的博客
07-25 220
【代码】使用JS中的DOM操作完成背景颜色渐变方向变换。
使用Js让背景实现自动改变linear-gradient颜色
BuerYouth分享
01-12 2430
渐变背景自动变换效果CSS线性渐变函数linear-gradient()实例菜鸟教程对函数的解释直接上实例 CSS线性渐变函数linear-gradient()实例 菜鸟教程对函数的解释 CSS linear-gradient() 函数 直接上实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自动渐变背景</title> </head>
linear-gradient渐变
05-09 130
开发中遇到需要给div添加条纹纹理效果，使用到linear-gradien(); <div class="linear"></div><style type="text/css">　　.linear{　　　　background-image:(10deg,red 25%,yellow 25%,yellow 50%,blue 50%);　　}&lt...
vue.js border-image和linear-gradient（）属性做一个边框渐变色
ycycycyc1的博客
02-22 5252
首先我们今天的需求是用border-image做一个边框渐变色！！！ 那我们先来介绍一下什么是border-image和linear-gradient border-image是指定作为div元素周围边框的图像，那么它有几个参数，我们该怎么正确使用它呢？ border-image有五个参数分别是： 我们最常用的就是border-image-source和border-image-slice还有border-image-repeat， 接下来就是linear-gradient() 函数用于创建一个线性渐变的
深入剖析CSS中的线性渐变linear-gradient
09-24
在CSS中，线性渐变可以通过`linear-gradient`函数来创建。 **语法** ```css linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) ``` 其中，`<angle>`用于指定渐变线的角度，...
CSS3样式linear-gradient的使用实例
09-27
CSS3中的`linear-gradient`是一个强大的工具，用于创建线性颜色渐变背景，它可以替代以往复杂的背景图片，实现更为灵活且响应式的网页设计。本文将深入探讨`linear-gradient`的工作原理，并通过实例展示其在不同场景...
利用CSS3的线性渐变linear-gradient制作边框的示例
09-24
比如，我们可以创建一个带有渐变色的边框，或者通过多个`linear-gradient`叠加实现多彩的边框。以下是一个例子： ```css .box { /* ...其他样式 */ border: none; background-image: linear-gradient(to right, ...
colorpicker:纯js颜色选择器和渐变选择器
05-01
EasyLogic的拾色器 创建该项目是为了实现颜色选择器。 它实现了颜色的基本功能并实现了图像滤镜。 文档网站： : 安装 npm npm install @easylogic/colorpicker 使用方法（浏览器） <link href="https://cdn.jsdelivr.net/npm/@easylogic/colorpicker@1.9.69/dist/colorpicker.css" /> [removed][removed] 如何使用 import '@easylogic/colorpicker/dist/colorpicker.css' import ColorPickerUI f
漂亮! js实现颜色渐变效果
10-21
很神奇！js实现颜色渐变效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
漂亮的CSS3颜色渐变选择器
06-12
现在html5  css3已经越来越流行，用CSS3实现DIV渐变已经不是什么难事了，但现在还需要先在PS中画出效果后再取色，写入CSS3比较麻烦。 今天给大家介绍一款插件，可以自由拖动DIV的渐变颜色，并直接复制代码即可，方便快捷。(注：后台是PHP代码，因此需要服务器支持)
史上最牛的js 颜色选择器
07-24
史上最牛的js 颜色选择器，确实是我见过最牛的取色器，项目正在使用中，有demo示例文件，分享分享下！
CSS线性渐变（linear-gradient）浏览器兼容时角度的问题
F_san的博客
08-21 1059
练习CSS写美团移动端页面时，header部分为渐变色。 background: linear-gradient(90deg, #ffd265, #ffbf2e); 但是加入浏览器前缀后，并没有按照理想的角度渐变。 background: linear-gradient(90deg, #ffd265, #ffbf2e); background: -o-linear-gradient(90deg, #ffd265, #ffbf2e); background: -ms-linear.
linear-gradient && radical-gradient详解
桃花扇的博客
03-26 1272
线性渐变与径向渐变，挺好玩的两个属性值，不过挺复杂的，希望能捋清楚吧 1.linear-gradient （1）基础用法 传两部分参数 方向 + 颜色（颜色可填两个以上的值），方向可为to right / top / left / bottom（默认方向）/ top right / top left / bottom right / bottom left 以及角度等 【例1】默认值为bo...
css3实现背景色渐变linear-gradient()
weixin_34273046的博客
10-11 440
用线性渐变创建图像。 如果想创建以对角线方式渐变的图像，可以使用to top left这样的多关键字方式来实现。 示例代码： linear-gradient(#fff, #333); linear-gradient(to bottom, #fff, #333); linear-gradient(to top, #333, #fff); linear-grad...
Background:linear-gradient()详解
m0_53438035的博客
07-21 3万+
一般渐变 未设置角度，则默认为180deg（从上到下） 设置了角度，则0deg为竖直向上，然后顺时针旋转 上图！ 块渐变 .aq1{ background-image: linear-gradient(45deg,#87f 60%,#f78 60%); } .aq2{ background-image: linear-gradient(90deg,#87f 60%,#f78 60%); } .aq3{ background
CSS3深度解析：线性渐变linear-gradient全面指南
"深入理解CSS中的线性渐变linear-gradient技术" 线性渐变是CSS3中的一个重要特性，它使得开发者能够轻松地在网页上创建动态、美观的颜色过渡效果，而不再依赖于图像编辑工具。线性渐变是通过沿着一条特定直线方向，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值