一、水平渐变

实现水平条纹很简单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>TEST</title>

    <style>

        .h100{

            height: 100px;

        }

        .gra{

            background: linear-gradient(#fb3 20%, #58a 80%);

        }

    </style>

</head>

<body>

<div class="h100 gra"></div>

</body>

</html>

效果如下：这样的效果一般就符合现实中的效果，#fb3 20% 表示上面背景颜色和颜色所占比例

linear-gradient里面的值表示背景渐变从上至下的颜色，一般的话两种就够了，如下：

        .gra{

            background: linear-gradient(#fb3 20%, #58a 30%,#ccc 50%);

        }

还有一种情况：两个颜色区域所占的百分比都是50%或者最后一个设置为0，那么就会产生一种有意思的情况，那就是渐变区域没了，如下

实际上渐变区域是存在的，只不过是无限小。

我们还可以使用background-size实现条纹效果：

        .gra{

            background: linear-gradient(#fb3 50%, #58a 50%);

            background-size: 100% 20px;

        }

二、垂直渐变

垂直效果的实现就有点难度了，还是那个属性：linear-gradient ，它里面有个默认的参数 to bottom，我们把它的值改成to right，background-size值颠倒，如下：

        .gra2{

            background: linear-gradient(to right ,#fb3 50%, #58a 50%);

            background-size: 20px 100%;

        }

三、倾斜渐变

实现倾斜渐变效果则会用到一个很偏的属性 repeating-linear-gradient 用法和linear-gradient一样

        .gra3{

            background: repeating-linear-gradient(45deg,#fb3,#58a 30px);

        }

效果如下：

其实linear-gradient也可以实现倾斜渐变的效果，只不过计算宽度有点复杂了，这里不做讨论，得不偿失

在我们实际应用中，倾斜渐变效果还是存在的，一般的话以浅色系为主，写个简单效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>TEST</title>

    <style>

        html,body{

            margin: 0;

            padding: 0;

            height: 100%;

        }

        .gra3{

            height: inherit;

            background: repeating-linear-gradient(45deg,#F8F8FF,#F5F5F5 30px);

        }

    </style>

</head>

<body>

<div class="gra3"></div>

</body>

</html>

颜色有点淡，没怎么选。用css实现渐变比用图片实现就显得高端多了

巴特西

CSS 条纹背景深入

一、水平渐变

二、垂直渐变

三、倾斜渐变

最新文章

热门文章