HTML基础：渐变

最新推荐文章于 2023-07-22 23:27:34 发布

山兔♪

最新推荐文章于 2023-07-22 23:27:34 发布

阅读量2k 笔记文章标签： html

本文链接：https://blog.csdn.net/u013849242/article/details/105350571

笔记专栏收录该内容

11 篇文章 0 订阅

1，线性渐变

    1）从一个方向到另一个方向的颜色的变化。
    2）标准模式的语法（不添加浏览器前缀）：
        background: linear-gradient(direction, color-stop1, color-stop2, ...);
        说明：
            direction：默认为to bottom，即从上向下的渐变；
            stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
    3）兼容模式语法（添加浏览器前缀）：
        background:linear-gradient( direction, color-stop1, color-stop2,。。。)
        说明： direction：  不能添加to    默认指的是 从哪个方向开始
    4）渐变方向：
        1：to left  \   to right  \ to top
        2: 对角着渐变
            to left top   \   to  right bottom
        3: 渐变线角度的变化
            例如：标准模式  ：  40deg     40度
                兼容模式  ：  90  -  40 
    5）线性渐变：颜色的分布：
        linear-gradient(方向, 颜色1 20%，颜色2 30%，颜色3 )
        到20%这个位置仍然是颜色1 出了20% 开始向颜色2渐变

案例：
在这里插入图片描述
效果：

2，径向渐变

    从一个点到四周的颜色的过渡变化。
    语法：（必须加浏览器前缀）
    background: radial-gradient(center, shape, size, start-color, ..., last-color);
    说明：
        center：渐变起点的位置，可以为百分比，默认是图形的正中心。
        shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
        size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
    关于径向渐变的大小：
        closest-side  最近边
        farthest-side 最远边
        closest-corner  最近角
        farthest-corner 最远角

案例：
在这里插入图片描述
效果：

注：其中添加的前缀：
即：很多css3属性最初的预览版没有形成最终的正式版，但是浏览器为了对这些新属性形成支持，主流浏览器提供属于自己的语法规则 “浏览器前缀”
-webkit- 谷歌、苹果浏览器前缀
-moz- 火狐浏览器前缀
-ms- IE浏览器前缀
-o- 欧鹏浏览器
注：
添加浏览器前缀 -> 兼容模式
不添加浏览器前缀 -> 标准模式