渐变 | <gradient> (Image Values) - CSS 中文开发手册 - Break易站

  •   CSS 中文开发手册

    渐变 | <gradient> (Image Values) - CSS 中文开发手册

    <gradient>css数据类型是css。<image>由两种或更多种颜色之间的渐进式转换而成。CSS梯度没有内在维度也就是说,它没有自然的或优先的大小,也没有优先的比率。它的具体大小将与它所应用的元素的大小相匹配。

    与涉及颜色的任何插值一样,在alpha预乘颜色空间中计算渐变。这样可以防止在颜色和不透明度变化时(除了在较旧的浏览器中使用透明关键字时)出现意外的灰色阴影。

    梯度类型

    线性梯度

    生成的linear-gradient()功能。颜色沿着一条假想的线平稳地过渡。

    1
    2
    3
    4
    body {
      background: linear-gradient(to right,
          red, orange, yellow, green, blue, indigo, violet);
    }

    径向梯度

    radial-gradient()功能。离原点越远,与原点的颜色越不相同,越接近下一个颜色。

    1
    2
    3
    body {
      background: radial-gradient(red, yellow, rgb(30, 144, 255));
    }

    重复梯度

    生成的repeating-linear-gradient()和repeating-radial-gradient()职能。它会重复所需的内容,以填充整个元素。

    1
    2
    3
    4
    body {
      background: repeating-linear-gradient(to top left,
          lightpink, lightpink 5px, white 5px, white 10px);
    }

    规格

    Specification

    Status

    Comment

    CSS Image Values and Replaced Content Module Level 3The definition of '<gradient>' in that specification.

    Candidate Recommendation

    Initial definition.

    浏览器兼容性

  •   CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32101.html

    posted on   MrAit  阅读(153)  评论(0编辑  收藏  举报

    编辑推荐:
    · SQL Server 内存占用高分析
    · .NET Core GC计划阶段(plan_phase)底层原理浅谈
    · .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
    · 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
    · 一个超经典 WinForm,WPF 卡死问题的终极反思
    阅读排行:
    · 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
    · 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多
    · C# 开发工具Visual Studio 介绍
    · 在 Windows 10 上实现免密码 SSH 登录
    · C#中如何使用异步编程

    导航

    < 2025年1月 >
    29 30 31 1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31 1
    2 3 4 5 6 7 8
    点击右上角即可分享
    微信分享提示