利用渐变实现多种几何图案

最新推荐文章于 2022-08-08 10:42:50 发布

爱编程的兔子

最新推荐文章于 2022-08-08 10:42:50 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 页面重构技巧文章标签： css gradient

本文链接：https://blog.youkuaiyun.com/wjnf012/article/details/80252717

css 同时被 2 个专栏收录

50 篇文章

订阅专栏

页面重构技巧

30 篇文章

订阅专栏

把多个渐变叠加起来会发生什么事呢？

div{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 8px solid rgba(255,255,255,0.6);
    background-clip: border-box;
}

例1

background: #fff;
background-image: linear-gradient(90deg,rgba(0,202,242,0.5) 50%,transparent 0),
                  linear-gradient(rgba(0,202,242,0.5) 50%,transparent 0);
background-size: 30px 30px;

这里写图片描述

例2

background: #00caf5;
background-image: linear-gradient(90deg,#fff 1px,transparent 0),
                  linear-gradient(#fff 1px,transparent 0);
background-size: 40px 40px;

这里写图片描述

例3

background: #00caf5;
background-image: linear-gradient(90deg,rgba(255,255,255,0.5) 1px,transparent 0),
                  linear-gradient(rgba(255,255,255,0.5) 1px,transparent 0),
                  linear-gradient(90deg,#fff 2px,transparent 0),
                  linear-gradient(#fff 2px,transparent 0);
background-size: 15px 15px,15px 15px, 60px 60px,60px 60px;

这里写图片描述
例4

background: linear-gradient(63deg,#fff 23%,transparent 23%) 7px 0,
            linear-gradient(63deg,transparent 74%,#fff 78%),
            linear-gradient(63deg,transparent 34%,#fff 38%,#fff 58%,transparent 62%),
            #00caf5;
background-size: 16px 48px;

这里写图片描述

例5

background: linear-gradient(115deg,transparent 75%,rgba(255,255,255,0.8) 75%) 0 0,
            linear-gradient(245deg,transparent 75%,rgba(255,255,255,0.8) 75%) 0 0,
            linear-gradient(115deg,transparent 75%,rgba(255,255,255,0.8) 75%) 7px -15px,
            linear-gradient(245deg,transparent 75%,rgba(255,255,255,0.8) 75%) 7px -15px,
            #00caf5;
background-size: 15px 30px;

这里写图片描述

例6

background: linear-gradient(45deg,#fff 20px,transparent 20px) 30px 29px,
            linear-gradient(45deg,#fff 20px,transparent 20px,transparent 42px,#00caf5 42px,#00caf5 63px, transparent 63px),
            linear-gradient(-45deg,#fff 10px,transparent 10px,transparent 30px,#fff 30px,#fff 53px,transparent 53px,transparent 72px,#fff 73px),
            #00caf5;
background-size: 60px 60px;

这里写图片描述

例7

background: linear-gradient(45deg,#fff 25%,transparent 25%) -30px 0,
            linear-gradient(135deg,#fff 25%,transparent 25%),
            linear-gradient(225deg,#fff 25%,transparent 25%),
            linear-gradient(315deg,#fff 25%,transparent 25%) -30px 0,
            #00caf5;
background-size: 60px 60px;

这里写图片描述

例8

background: linear-gradient(135deg,#00caf5 22px,#fff 22px, #fff 24px,transparent 24px,transparent 67px, #fff 67px, #FFF 69px, transparent 69px),
            linear-gradient(225deg,#00caf5 22px,#fff 22px, #fff 24px,transparent 24px,transparent 67px, #fff 67px, #fff 69px, transparent 69px) 0 64px ,
            #00caf5;
background-size: 64px 128px;