Rumah > hujung hadapan web > tutorial css > CSS3怎么实现重复线性渐变效果

CSS3怎么实现重复线性渐变效果

藏色散人
Lepaskan: 2021-04-21 15:14:35
asal
7786 orang telah melayarinya

css3实现重复线性渐变效果的方法:首先创建一个HTML示例文件;然后在body中创建一个div;最后使用css3中“repeating-linear-gradient()”函数来实现重复渐变的效果即可。

CSS3怎么实现重复线性渐变效果

本文操作环境:Windows7系统、HTML5&&CSS3版、Dell G3电脑。

CSS3怎么实现重复线性渐变效果

对于前端学习的小伙伴们来说,渐变效果肯定并不陌生。大家应该都知道css3中有线性渐变和径向渐变。并且在前面的文章中,我们也已经给大家介绍了CSS3实现线性渐变的效果CSS3实现径向渐变的效果,需要的朋友可以先参考了解。

本节主要再给大家介绍css3实现重复线性渐变效果的方法

重复线性渐变效果,有的朋友可能听起来比较陌生,但是在我们日常生活中也是常见的一种渐变效果。

代码示例如下:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>CSS3创建重复线性渐变效果</title>
    <style type="text/css">
        .container{
            text-align:center;
            padding:20px 0;
            width:960px;
            margin: 0 auto;
        }

        .container div{
            width:200px;
            height:150px;
            display:inline-block;
            margin:2px;
            color:#ec8007;
            vertical-align: top;
            line-height: 230px;
            font-size: 20px;
        }
        .repeating-linear{
            background:repeating-linear-gradient(-45deg, #4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);
        }
    </style>
</head>
<body>
<div class="container">
 <div class="repeating-linear">重复线性渐变</div>
</div>
</body>
</html>
Salin selepas log masuk

推荐参考学习:《CSS3教程

重复线性效果如下图:

095d40758ce12c283cb62f4f35f23a9.png

如图所示,蓝白条间隔的线性渐变效果。从-45 度线性渐变(也就是右下角45度),从#4b6c9c到#5ac4ed以及白色到白色的过渡重复渐变。

css3中repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"。

语法:

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
Salin selepas log masuk

be987aec3663be194f80bb3ccbfd247.jpg

注: Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。

本篇文章就是关于CSS3实现重复线性渐变效果的方法介绍,非常的简单,希望对需要的朋友有所帮助!

Atas ialah kandungan terperinci CSS3怎么实现重复线性渐变效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan