渐变的基础内容

最新推荐文章于 2025-02-11 15:28:26 发布
原创 最新推荐文章于 2025-02-11 15:28:26 发布 · 338 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html #css #javascript
博客介绍了CSS相关知识，包括渐变（线性渐变和径向渐变）的语法、形状、圆心位置及重复渐变的使用；还提及重置元素大小的常用值及注意事项；同时介绍了鼠标样式cursor属性的常用值和其他特殊值，帮助开发者实现不同的页面效果。

渐变

从一种颜色到其他颜色的过渡（两种及两种以上颜色）

1 线性渐变 linear-gradient

线型渐变 ： 从一个方向到另一个方向的渐变

  • 语法

background: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
    方向：数值（单位deg)、关键词（left|right   top|bottom)
    颜色：关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)
    范围：每个颜色结点的显示范围
    注意：
    方向：加前缀需要把to去掉，方向是相反的
​
​
取值：
​
1、使用起始位置关键字 
​
- to right  方向自左向右
​
- to top  方向自下而上
​
- to bottom 方向自上而下
​
- to left  方向自右而左
​
- to right top  方向朝向右上角
- to right bottom  方向朝向右下角
- to top left 方向朝向左上角
- to left bottom方向朝向左下角
​
​
 2、使用角度
- 0deg 相当于  to top
- 90deg 相当于 to right
​
3、百分比

  • 重复线性渐变

background:repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
background: repeating-linear-gradient(180deg, red 0%, red 10%, yellow 10%,yellow 20%);
  div {
        width: 300px;
        height: 300px;
        margin: 20px;
    }
​
    /*  方向朝向左上角，red--blue渐变 */
    .box1 {
        background: linear-gradient(to top left, red, yellow, green);
    }
​
    /* 线性渐变：
     从45度方向开始：
     0%-20%：纯黄色
     20%-60%：黄色和粉色渐变
     60%-100%：纯粉色 */
​
    .box2 {
        background: -webkit-linear-gradient(45deg, yellow 20%, pink 60%);
        background: -o-linear-gradient(45deg, yellow 20%, pink 60%);
        background: -moz-linear-gradient(45deg, yellow 20%, pink 60%);
        background: -ms-linear-gradient(45deg, yellow 20%, pink 60%);
        background: linear-gradient(45deg, yellow 20%, pink 60%);
    }
​
    .box3 {
        background: linear-gradient(90deg, yellow 20%, pink 60%);
    }
​
    /* 方向：加前缀需要把to去掉，方向是相反的 */
    .box4 {
        background: -webkit-linear-gradient(right, red, yellow, green);
    }
​
    .box5 {
        background: linear-gradient(to right, red, yellow, green);
    }
​
    /* 重复线性渐变 */
    /* 兼容里的写法，先写私有前缀，在写标准的 */
    .box6 {
        background: -webkit-repeating-linear-gradient(top, red 10%, yellow 20%, green 30%);
        background: -moz-repeating-linear-gradient(top, red 10%, yellow 20%, green 30%);
        background: -o-repeating-linear-gradient(top, red 10%, yellow 20%, green 30%);
        background: -ms-repeating-linear-gradient(top, red 10%, yellow 20%, green 30%);
        /* 不加前缀记得加to */
        background: repeating-linear-gradient(to top, red 10%, yellow 20%, green 30%);
    }

2 径向渐变 radial-gradient

径向渐变 ： 一个点到四周的渐变

  • 语法

  • backgrond: radial-gradient(渐变形状, 颜色1 范围1, 颜色2 范围2, ...);
        渐变形状：椭圆（ellipse,默认值）、圆形（circle）
    

    圆心位置
    语法：background:radial-gradient(形状 at 水平位置 垂直位置,颜色1，颜色2

    取值：
    - px（表示距左上角的0，0的坐标位置）
    - 关键字可以是以下词的组合
      - left center right
      - top center bottom
    - 百分比
    ​
    例：表示圆心在右侧中心
     background: radial-gradient(circle at 100% 50%, red, yellow, green)

    •```
    例：表示圆心在左上角
    background: radial-gradient(circle at left top, red, yellow, green);

  • 重复径向渐变

  • backgrond: repeating-radial-gradient(渐变形状/圆心, 颜色1 范围1, 颜色2 范围2, ...);

       div {
                width: 300px;
                height: 300px;
                margin: 20px;
            }

            /* 椭圆（ellipse,默认值） */
            .box1 {
                background: -webkit-radial-gradient(ellipse, red, yellow, green);
                background: -moz-radial-gradient(ellipse, red, yellow, green);
                background: -o-radial-gradient(ellipse, red, yellow, green);
                background: -ms-radial-gradient(ellipse, red, yellow, green);
                background: radial-gradient(ellipse, red, yellow, green);
            }

            /* 圆形（circle） */
            .box2 {
                background: -webkit-radial-gradient(circle, red, yellow, green);
                background: -moz-radial-gradient(circle, red, yellow, green);
                background: -o-radial-gradient(circle, red, yellow, green);
                background: -ms-radial-gradient(circle, red, yellow, green);
                background: radial-gradient(circle, red, yellow, green);
            }

            /* 圆心位置 px（表示距左上角的0，0的坐标位置）*/
            .box3 {
                background: -webkit-radial-gradient(circle at 50px 100px, red, yellow, green);
                background: -moz-radial-gradient(circle at 50px 100px, red, yellow, green);
                background: -o-radial-gradient(circle at 50px 100px, red, yellow, green);
                background: -ms-radial-gradient(circle at 50px 100px, red, yellow, green);
                background: radial-gradient(circle at 50px 100px, red, yellow, green);
            }

            /* 百分比 表示圆心在右侧中心 */
            .box3 {
                background: -webkit-radial-gradient(circle at 100% 50%, red, yellow, green);
                background: -moz-radial-gradient(circle at 100% 50%, red, yellow, green);
                background: -o-radial-gradient(circle at 100% 50%, red, yellow, green);
                background: -ms-radial-gradient(circle at 100% 50%, red, yellow, green);
                background: radial-gradient(circle at 100% 50%, red, yellow, green);
            }

            /* 关键词 表示圆心在左上角 */
            .box4 {
                background: -webkit-radial-gradient(circle at left top, red, yellow, green);
                background: -moz-radial-gradient(circle at left top, red, yellow, green);
                background: -o-radial-gradient(circle at left top, red, yellow, green);
                background: -ms-radial-gradient(circle at left top, red, yellow, green);
                background: radial-gradient(circle at left top, red, yellow, green);
            }

            /* 重复径向渐变 */
            .box5 {
                background: -webkit-repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);
                background: -moz-repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);
                background: -o-repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);
                background: -ms-repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);
                background: repeating-radial-gradient(circle, red 10%, yellow 20%, green 30%);
            }

            /* 重复径向渐变 */
            .box6 {
                background: -webkit-repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);
                background: -moz-repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);
                background: -o-repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);
                background: -ms-repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);
                background: repeating-radial-gradient(circle at 50px 50px, red 10%, yellow 20%, green 30%);
            }

  • 重置元素大小resize

    默认：文本域可以用户可以通过鼠标拖拽改变大小

    常用值：

    none 默认值

    horizontal 改变元素水平尺寸

    vertical 改变元素垂直尺寸

    both 同时改变元素水平和垂直尺寸

    resize:none指定一个元素不允许用户调整大小

     textarea{
    /* 禁止用户重置元素大小 */
    resize: none;
 }

    注意： 改变元素尺寸需要设置overflow属性，除了默认值visible以外

    CSS 鼠标样式 cursor

    通过在CSS中，cursor属性指定鼠标指针放在一个元素边界范围内时所用的光标形状

  • 常用值

    • 默认值：auto

    • default 通常是一个箭头

    • text 显示为光标

    • pointer 光标呈现为指示链接的指针（一只手）

    • move 此光标指示某对象可被移动。

  • 其他值

    e-resize 此光标指示矩形框的边缘可被向右（东）移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 n-resize 此光标指示矩形框的边缘可被向上（北）移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 s-resize 此光标指示矩形框的边缘可被向下移动（南）。 w-resize 此光标指示矩形框的边缘可被向左移动（西）。 text 此光标指示文本。 wait 此光标指示程序正忙（通常是一只表或沙漏）。 help 此光标指示可用的帮助（通常是一个问号或一个气球）。

均沾啊
关注
css小手样式
小斌的博客
12-31 2827
css的cursor属性可以定义鼠标显示不同的光标 class { cursor: pointer; //小手样式 } 默认值是auto url:自定义光标的地址（URL） 通常需要在后面定义一个默认光标 防止URL地址出错 default 默认光标（箭头） auto 浏览器设置的光标 crosshair 十字线 pointer 小手 move 提示可移动 e-resize 提升可被向右移动 ne-resize 提示可被向上和向右移动 nw-resize ...
css小手标示
zhaoletf的博客
09-08 1万+
鼠标放上去显示小手形状， css样式如下： style=“cursor: hand” 部分浏览器支持 style=“cursor: pointer” 大部分浏览器都支持 把上述两个代码中的一个放进去即可,而小手的标示只是sursor其中一个属性,接下来让我一起看下sursor具体有那些用法。 cursor 定义和用法 cursor 属性规定要显示的光标的类型（形状）,下面是具体的属性。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为
CSS cursor 属性(设置鼠标光标)
qq_44537625的博客
08-23 1589
cursor用来设置悬停在元素上面时的鼠标光标。 示例代码 <html> <body> <p>把鼠标移动到单词上，可以看到鼠标指针发生变化：</p> <span style="cursor:auto"> Auto</span><br /> <span style="cursor:crosshair"&gt...
CSS鼠标指针变成小手
weixin_52796953的博客
07-08 6790
有些时候根据UI设计，鼠标指针不能是常规的箭头或者竖线，而是要实现鼠标指向某些元素时，指针变成小手。css属性cursor：设置光标的类型，鼠标指针悬停在元素上时显示相应的样式。通过添加css样式cursor:pointer;，可以实现鼠标指针变为小手。
CSS 渐变
2401_84341405的博客
05-05 821
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
【CSS 渐变Gradient详解】线性渐变、径向渐变、锥形渐变及重复渐变
羊羊羊羊羊羊羊的博客
12-14 4628
是 的一种特殊类型，包含两种或多种颜色的过渡转变。CSS 渐变实际大小取决于所应用的元素的大小。由 linear-gradient() 函数、 radial-gradient() 函数、 conic-gradient() 函数产生的。重复渐变是使用 repeating-linear-gradient() 和 repeating-radial-gradien()和 repeating-conic-gradient()函数创建。
CSS3——渐变（线性渐变、径向渐变、重复性渐变）
weixin_45249263的博客
01-21 9201
CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS 渐变效果详解——线性渐变与径向渐变
最新发布
weixin_45474825的博客
02-11 4025
无论是线性渐变还是径向渐变，CSS 渐变技术都为网页设计提供了极大的灵活性和创造空间。本文详细介绍了两种渐变的基本原理、常见语法以及应用场景。希望通过本文，大家能对 CSS 渐变有更深入的了解，并在日常开发中能熟练运用这一特性，为项目增添更多绚丽的视觉效果。如果大家在学习或者使用 CSS 渐变时遇到问题，欢迎在评论区讨论交流。以上就是关于线性渐变和径向渐变的详细介绍与示例。希望对你有所帮助！
【CSS 文字渐变、背景渐变实现方式】
热门推荐
iuvc的博客
06-18 1万+
CSS 文字渐变，背景颜色渐变实现方式
OpenLayers线性渐变和中心渐变（径向渐变）
AIGIS的博客
03-01 3031
OpenLayers官网有整个图层的渐变示例，但是没有单个要素的渐变示例，我们这里来补充一下。OpenLayers中的渐变是通过fill选项中实现的。fill选项可以传一个ColorLike，本质是通过Canvas实现的,此时ColorLike对应的是或。OpenLayers中的渐变效果实在很难令人满意，又或者是我们理解的有问题，因为其是动态变化的，我们很难得到想要的结果。目前，我们要时刻注意监听视图的变化来修改渐变的效果。本文算是抛砖引玉吧，如果某位有志之士能谁能解决掉这个问题，希望能告诉我一下，回见~
QPainter的渐变
TOMJJY的博客
10-20 1786
一、线性渐变 Q_UNUSED(event); QPainter painter; painter.begin(this); QLinearGradient ling(QPoint(0,0),QPoint(400,400));//参数1指定起始点，参数2指定结束点 ling.setColorAt(0,Qt::blue);//指定起点颜色 ling.setColorAt(1,Qt::green);//指定终点颜色 ling.setSpread(QGr
CSS渐变色理论与分类、文字渐变色方案、炸裂渐变色方案以及主流专业渐变色工具网站推荐
JINGWHALE
04-24 2805
本文介绍了CSS渐变的理论与分类、文字渐变色方案、炸裂渐变方案以及主流的专业渐变色工具网站。渐变色彩可以增加视觉层次感和动态效果，使网页界面更加生动有趣，吸引用户注意力。另外，相较于静态背景图片，CSS渐变无需额外的HTTP请求，减轻服务器负载，加快页面加载速度；同时CSS渐变能够根据容器尺寸自动调整，适用于不同屏幕尺寸及分辨率设备，保持良好的自适应性。
css渐变
zhangh040629的博客
09-06 3309
/div/*linear-gradient(direction,color-stop1,color-stop2,color-stop3,...) 渐变direction方向, 默认为to bottom, 即从上向下进行渐变支持多个颜色渐变支持角度写法*/width;height;border;*/*//* 角度写法，0是从下面开始 */background;background;</</</</</
CSS渐变
weixin_46379044的博客
02-23 2020
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradient...
web之线性渐变，径向渐变，重复渐变
n34886746的博客
05-29 1986
web之线性渐变，径向渐变，重复渐变 渐变能做很多炫丽的效果，减少图片的使用，有很强的适用性与扩展性。 1.线性渐变 线性渐变是指一个颜色从一个方向向另一个颜色变化，相当于从任意角度向任意角度变化（角度之间必须相差180°）。 background:linear-gradient(to left,red,blue,black) 从右到左先红，再慢慢变蓝，再慢慢变黑 2.径向渐变 border: solid 1px #ccc; width: 300px; height: 300px; background:
Ps：渐变工具 - 经典渐变
qq_41176800的博客
03-08 4351
渐变工具 Gradient Tool常用于背景填充和界面元素设计，可创建平滑的颜色过渡效果。也可用于图层蒙版上，控制图像或效果的平滑混合。快捷键：G渐变工具选项栏中有两种模式：渐变 Gradient和经典渐变 Classic gradient，经典渐变即传统的渐变方式。◆◆◆常用操作方法与技巧1、在绘制渐变之前，应先确定渐变样式，尤其是是否为从颜色到透明的渐变，然后再确认渐变类型是哪一种。...
background 渐变_背景颜色渐变
weixin_39886238的博客
11-28 7842
在css之前如果想要加入渐变效果，通常要通过设置背景图像来实现。css3中加入了渐变属性，通过渐变属性可以很轻松的实现渐变效果。css的渐变效果主要包括线性渐变和径向渐变。线性渐变：起始颜色沿着一条直线过渡，在css3中利用“background-image:linear-gradient(参数值);”可以实现渐变效果，基本格式如下：background-image:linear-gra...
Ps：渐变填充
qq_41176800的博客
03-15 3670
渐变填充图层Gradient Fill Layer可用于在图像上添加颜色渐变效果。Ps菜单：图层/新建填充图层/渐变New Fill Layer/Gradient这种图层类型提供了一种简单灵活、非破坏性的方式来增加视觉效果，无论是用于背景、图形设计元素还是作为调整工具。◆◆◆使用方法与技巧1、双击渐变填充图层缩览图，弹出“渐变填充”对话框，可以调整渐变选项。此时，还可以在图像窗口中拖动...
css3渐变、线性渐变和径向渐变
Luckstar_wei的博客
12-11 1523
菜鸟教程 | Airen的博客 | 张鑫旭 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）： - 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值