旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

CSS3怎样完成反复线性渐变结果【html5教程】

作者:搜搜PHP网发布时间:2019-11-26分类:HTML浏览:67


导读:关于前端进修的小伙伴们来讲,渐变结果一定并不生疏。人人应当都晓得css3中有线性渐变和径向渐变。而且在前面的文章中,我们也已给人人引见了CSS3完成线性渐变的结果和CSS3完成径向...
关于前端进修的小伙伴们来讲,渐变结果一定并不生疏。人人应当都晓得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>

反复线性结果以下图:

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

css3中repeating-linear-gradient() 函数用于建立反复的线性渐变 "图象"。

语法:

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

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

本篇文章就是关于CSS3完成反复线性渐变结果的要领引见,异常的简朴,愿望对须要的朋侪有所协助!

以上就是CSS3怎样完成反复线性渐变结果的细致内容,更多请关注ki4网别的相干文章!

标签:css3实现重复线性渐变效果