详细解读CSS渐变用法——Web前端系列学习笔记

Posted 来老铁干了这碗代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了详细解读CSS渐变用法——Web前端系列学习笔记相关的知识，希望对你有一定的参考价值。

文章目录

线性渐变

属性解析

通过关键词来确定渐变的方向。默认值为top（从上向下），取值范围是 [left,right,top,bottom,center,top right,top left,bottom left,bottom right,left center,right center]。注意：IE10只能取[left,top]，Chrome则没有[center,left center,right center]。

background-image:linear-gradient([ <angle> | <side-or-corner>,] 
                               color stop, color stop[, color stop]*);

angle：表示渐变的角度，角度数的取值范围是0~365deg。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变。

color stop：用于设置颜色边界，color为边界的颜色，stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100%则表示该边界位于可视区域外。两个 color stop 之间的区域为颜色过渡区。

实例代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3线性渐变</title>
</head>
<style type="text/css">
    .rainbow-linear-gradient{
        width: 460px;
        height: 160px;
        /*渐变的方向 上下左右 中心 左上左下右上右下 or 以角度渐变。如45deg*/
        background-image: -webkit-linear-gradient(left, #E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
    }
</style>
<body>
<div class="rainbow-linear-gradient"></div>
</body>
</html>

效果图

径向渐变

属性解析

background-image: radial-gradient(圆心坐标, 渐变形状 渐变大小, 
                               color stop, color stop[, color stop]*);

圆心坐标：用于设置放射的圆形坐标，可设置为形如10px 20px的 x-offset y-offset ，或使用预设值center（默认值）。
渐变形状：circle ：圆形。ellipse：椭圆形，默认值。
渐变大小：

  • closest-side 或 contain :以距离圆心最近的边的距离作为渐变半径。
  • closest-corner:以距离圆心最近的角的距离作为渐变半径。
  • farthest-side:以距离圆心最远的边的距离作为渐变半径。
  • farthest-corner 或 cove:以距离圆心最远的角的距离作为渐变半径。

示例代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3径向渐变</title>
    <style type="text/css">
        .rainbow-radial-gradient{
            width: 300px;
            height: 300px;
            /*从中心开始依次占比*/
            /*1 横坐标和纵坐标都是100 默认值是center*/
            /*2 所有的百分比都是半径长度百分比，都是模糊半径（暂定）
                如第一层10% 第二层20%  则0%-10%都是具体的颜色，
                10%-20%为第一层颜色的模糊  20%-60%是第二层颜色的模糊
                60%以后是背景颜色
            */
            background-image: -webkit-radial-gradient(100px 100px , #000 10%, #ffb151 20%, #16104b 60%);
        }
    </style>
</head>
<body>
<div class="rainbow-radial-gradient"></div>
</body>
</html>

效果图

多学一招：重复渐变

了解了线性渐变和径向渐变的使用方法后，接下介绍一下重复渐变。对以上两种渐变方式都是适用的，只需在两个属性前添加“ repeating-“,具体语法格式如下：

/*线性重复渐变*/
repeating-linear-gradient(起始角度, color stop, color stop[, color stop]*) 

/*径向重复渐变*/
repeating-radial-gradient(圆心坐标, 渐变形状 渐变大小, color stop, color stop[, color stop]*)

以上是关于详细解读CSS渐变用法——Web前端系列学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

CSS过渡属性transitions详细解读——Web前端系列学习笔记

CSS过渡属性transitions详细解读——Web前端系列学习笔记

详细解读CSS优先级——Web前端系列学习笔记

详细解读CSS优先级——Web前端系列学习笔记

详细解读CSS链接属性——Web前端系列学习笔记

详细解读CSS链接属性——Web前端系列学习笔记