CSS特性 之渐变 （全网最全）

大家好，欢迎来到IT知识分享网。

对自己学习做一个总结 做了一个专题

目录

一：渐变的基础知识

1 什么是渐变

2 色标:

3 渐变的分类

二：几种渐变方式的实例分析

1:线性渐变

​编辑

​编辑

2 :径向渐变

3:重复渐变

​编辑

​编辑

4:浏览的兼容问题

三：完整代码实现 立刻上机

一：渐变的基础知识

1 什么是渐变

2 色标:

3 渐变的分类

二：几种渐变方式的实例分析

1:线性渐变

图示：

    位置
    (1) 1% ~ 100%
    (2) px .
    (3)不写默认平均分配

 d1

d2

2 :径向渐变

• at top
• at right
• at left
• at center
• at bottom
• at 50px 100px 指定位置

3:重复渐变

                                                                              色标1，

                                                                              色标2)
background-image: repeating-linear-gradient(方向，

                                                                              色标1，

                                                                              色标2)

4:浏览的兼容问题

• background-image:-webkit-linear-gradient(top,色标)
• background-image-moz-linear-gradient(top,色标)
• background-image:-o-linear-gradient(top,色标)
• background-image:-ms-lineargradient(top,色标)

直接写起点 方向不能写to

通过F12的观察可以发现 这是只有-webkit- 显示成功说明这是chrome浏览器 因此该语句可以自动兼容

三：完整代码实现 立刻上机

心中有图 撸码自然神