Css背景渐变属性语法介绍以及使用

1. 线性渐变

    语法:

background: linear-gradient(tp top, red 0%, yellow 30%, green 45%);

    注: 重复的线性渐变写法如下

background: repeating-linear-gradient(red 0%, yellow 10%, green 20%)

    重复的线性渐变必须自定义渐变的位置才能出现重复渐变的效果

2. 径向渐变

    语法:

background: -webkit-radial-gradient(left top, circle farthest-corner, red 0%, yellow 5%, green 10%);

    ① 第一个参数代表渐变中心点位置(百分比，像素，固定值)

    ② 第二个参数代表形状和渐变半径长度

        形状默认为椭圆ellipse，设置为circle时为圆形，当宽高相等时，两者形状均为圆形渐变半径长度

    closest-side: 半径为离圆心最近的边

    closest-cornet: 半径为离圆心最近的角

    farthest-side: 半径为离圆心最远的边

    farthest-corner: 半径为离圆心最远的角

    注: 重复径向渐变写法如下

background: -webkit-repeating-radial-gradient(red 0%, yellow 5%, green 10%);

    重复渐变必须自定义渐变位置

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓