美文网首页
css3-重复渐变

css3-重复渐变

作者: AssertDo | 来源:发表于2019-08-26 16:41 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background-color: #ccc;
            }
            div:first-of-type{
                width: 300px;
                height: 300px;
    
                background: repeating-radial-gradient(circle closest-side at center center,
                #fff 0%,#fff 10%,
                #000 10%,#000 20%);
            }
            div:last-of-type{
                width: 200px;
                height: 800px;
                background: repeating-linear-gradient(45deg,
                        #fff 0%,#fff 10%,
                        #000 10%,#000 20%);
            }
        </style>
    </head>
    <body>
    <div></div>
    <div></div>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:css3-重复渐变

          本文链接:https://www.haomeiwen.com/subject/yiddectx.html