码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-07-01 23:53:25      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:bre   透明   页面   bottom   tom   变化   填充   规格   com   

  • ??CSS 中文开发手册

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

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

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

    梯度类型

    线性梯度

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

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

    径向梯度

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

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

    重复梯度

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

    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

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

    标签:bre   透明   页面   bottom   tom   变化   填充   规格   com   

    原文地址:https://www.cnblogs.com/breakyizhan/p/13222031.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!