HTML CSS中设置背景颜色渐变色 线性渐变与径向渐变 gradient知识总结

据我现在所知,渐变色的设置只能在背景上实现,这是前提

本文于 2022/10/25 修改 增加有不同的实现写法 所有例子图在最后,该次补充是在阅读学习 (https://www.w3cschool.cn/lugfe/lugfe-bd5q25ys.html)该文章之后进行的测试与记录,你可以先去看原文章,写的很详细,不理解可以再回来看我的总结和例子图

阅读CSS3 gradient 的知识点,将经常能用到的记录下来,末尾有提供复制的样式代码

一、线性渐变,由于浏览器兼容性问题,在使用以下几种写法,需要将所有浏览器兼容都加上,否则可能出现所有都无法渐变成功的情况

background:linear-gradient(起点, 开始的颜色 [位置], [中间颜色 [位置],] 最后的颜色 [位置]);
background:linear-gradient(to 终点, 起点颜色 [位置], [中间颜色 [位置],]  终点颜色 [位置]);
background: gradient(linear, left 位置1, right 位置2, from(左边颜色), to(右边颜色));

参数解释

[ 中括号里面的内容表示可以有也可以没有 ] 注意 空格不要落下 , 尤其是颜色和位置之间的

  • 起点:渐变开始的地方 (可用值: top 上 / right 右/ bottom 下 / left 左 / top right 右上 / … 四方向自由组合等等/
    60deg 角度,单位deg,不同浏览器标准不同 )
  • 终点:渐变终点的地方 (可用值: top 上 / right 右/ bottom 下 / left 左 / top right 右上 / … 四方向自由组合等等 )
  • 开始的颜色:就是渐变程度0%时的颜色 (可用值: red 颜色英文 / rgb(0,0,0) RGB颜色 / rgba(0,0,0,0.5) RGBA透明度颜色 /
    #ffffff 十六进制颜色 )
  • 中间颜色:渐变可以包含多种颜色,先从颜色A渐变到颜色B,再从颜色B渐变到颜色C ,可用值与开始的颜色相同
  • 最后的颜色:就是渐变程度100%时的颜色(可用值: red 颜色英文 / rgb(0,0,0) RGB颜色 / rgba(0,0,0,0.5) RGBA透明度颜色 /
    #ffffff 十六进制颜色 )
  • 位置:当前这种渐变颜色开始出现的位置 (可用值 :20px 像素 / 20% 百分比 ) !注意:后面的颜色位置必须大于前面的不然会覆盖前面的颜色
  • 位置1 :左边渐变开始的地方 (可用值: 100 正数 / 10% 百分比 / -100 负数 )
  • 位置2 :右边渐变结束的地方 (可用值: 100 正数 / 10% 百分比 / -100 负数 )

第三种只能是在从左到右发生渐变,具体原因不知,如果你知道,请在评论区告诉我,别逼我跪下来求你

二、径向渐变

background:radial-gradient([圆心位置,] [形状] [半径长度] [,] 中心颜色 [位置],[中间颜色 [位置],] 外圈颜色 [位置]);

参数解释

  • 圆心位置:径向渐变的圆心,默认为元素正中心 (可用值 :center 正中心默认 / top / left / bottom / right / 60% )
  • 形状:径向渐变的形状 (可用值: circle 正圆 / ellipse 椭圆 )
  • 半径长度:径向渐变的长度 ,默认 farthest-corner (可用值: farthest-corner 半径长度为从圆心到离圆心最远的角 / closest-corner 半径长度为从圆心到离圆心最近的角 / farthest-side 半径长度为从圆心到离圆心最远的边 / closest-side 半径长度为从圆心到离圆心最近的边)
  • , :形状 和 半径长度 存在任何一个都需要在后面加逗号 , 如果 形状 和 半径长度 同时存在,他们之间不加逗号
  • 中心颜色:径向渐变圆心的颜色 (可用值: red 颜色英文 / rgb(0,0,0) RGB颜色 / rgba(0,0,0,0.5) RGBA透明度颜色 / #ffffff 十六进制颜色 )
  • 中间颜色:渐变可以包含多种颜色,先从颜色A渐变到颜色B,再从颜色B渐变到颜色C ,可用值与中心颜色相同
  • 外圈颜色:径向渐变最外圈的颜色,可用值与中心颜色相同
  • 位置:当前这种渐变颜色开始出现的位置 (可用值 :20px 像素 / 20% 百分比 ) !注意:后面的颜色位置必须大于前面的不然会覆盖前面的颜色

浏览器的兼容性示例如下

moz- ——> firefox浏览器

-ms- ——> ie浏览器

-webkit- ——> safari、chrome浏览器

-o- ——> opera浏览器

举例(火狐浏览器)

background:-moz-linear-gradient(top,red,blue);

HTML CSS中设置背景颜色渐变色 线性渐变与径向渐变 gradient知识总结_第1张图片

渐变例子

HTML CSS中设置背景颜色渐变色 线性渐变与径向渐变 gradient知识总结_第2张图片
HTML CSS中设置背景颜色渐变色 线性渐变与径向渐变 gradient知识总结_第3张图片
HTML CSS中设置背景颜色渐变色 线性渐变与径向渐变 gradient知识总结_第4张图片

供复制的代码:
background: linear-gradient(to top, red 10% , blue 20% , yellow 60%);
background: linear-gradient(to top, red , blue , yellow);
background: -webkit-linear-gradient(-120deg, red, blue);
background: linear-gradient(30deg, red, blue);
background: linear-gradient(to bottom left, red, blue);
background: linear-gradient(to top, red 20px, blue 40px);
background: linear-gradient(to top, red 30%, blue 80%);
background: gradient(linear, left 10%, right 80, from(rgba(255, 0, 0,0.5)), to(blue));
background: gradient(linear, left 90%, right -70, from(rgba(255, 0, 0,0.5)), to(blue));
background: radial-gradient(red, blue);
background: radial-gradient(left, red, blue);
background: radial-gradient(30%, red, blue);
background: radial-gradient(10%, circle closest-side, red, blue);
background: radial-gradient(10%, closest-side, red, blue);
background: radial-gradient(red, blue, yellow);
background: radial-gradient(top, red, blue, yellow);
background: radial-gradient(red 10%, blue 20%, yellow 60%);
background: radial-gradient(top, red 10%, blue 20%, yellow 60%);

测试累死我了,我只在Edge浏览器上进行测试,有时候要加 -webkit- 有时候又不用加,真的是令人头大,感谢阅读

你可能感兴趣的:(css,html,前端)