css：实现斑马条纹背景

效果

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.container {display: flex;flex-wrap: wrap;justify-content: space-around;align-content: space-around;width: 1000px;height: 900px;}.bg {display: flex;justify-content: center;align-items: center;width: 300px;height: 200px;color: white;font-size: 36px;}/*渐变*/.bg-first {/*** 0-20%为#cc95c0，20%-80%为#cc95c0到#7aa1d2的渐变，80%-100%为#7aa1d2*/background: linear-gradient(#cc95c0 20%, #7aa1d2 80%);}/*分割*/.bg-second {/*** 0-50%为#cc95c0，50%-100%为#7aa1d2*/background: linear-gradient(#cc95c0 50%, #7aa1d2 50%);}/*斑马条纹*/.bg-third {background: linear-gradient(#cc95c0 50%, #dbd4b4 50%);background-size: 100% 40px;}/*三色斑马条纹*/.bg-fourth {/*** 100% ÷ 3 = 33.3%*/background: linear-gradient(#cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);background-size: 100% 40px;}/*竖向双色斑马条纹*/.bg-fifth {background: linear-gradient(to right, #cc95c0 50%, #dbd4b4 0);background-size: 40px 100%;}/*竖向三色斑马条纹*/.bg-sixth {/*** 100% ÷ 3 = 33.3%*/background: linear-gradient(to right, #cc95c0 33.3%, #dbd4b4 0, #dbd4b4 66.6%, #7aa1d2 0);background-size: 40px 100%;}/*斜向双色斑马条纹*/.bg-seventh {/*** 50% ÷ 2 = 25%*/background: linear-gradient(45deg, #cc95c0 25%, #dbd4b4 0, #dbd4b4 50%, #cc95c0 0, #cc95c0 75%, #dbd4b4 0);background-size: 40px 40px;}/*斜向三色斑马条纹*/.bg-eighth {/*** 50% ÷ 3 = 16.66%*/background: linear-gradient( 45deg, #cc95c0 0, #cc95c0 16.66%, #dbd4b4 16.66%, #dbd4b4 33.33%, #7aa1d2 33.33%, #7aa1d2 50%, #cc95c0 50%, #cc95c0 66.66%, #dbd4b4 66.66%, #dbd4b4 83.33%, #7aa1d2 83.33%, #7aa1d2);background-size: 40px 40px;}/*repeating-linear-gradient虚化斑马条纹*/.bg-ninth {background: #cc95c0;background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 15px, transparent 0, transparent 30px);}/*repeating-linear-gradient斜向双色条纹*/.bg-tenth {background: repeating-linear-gradient(45deg, #cc95c0, #cc95c0 15px, #dbd4b4 0, #dbd4b4 30px);}/*鳞片式三角条纹*/.bg-eleventh {background: linear-gradient(45deg, #cc95c0 50%, #dbd4b4 0);background-size: 40px 40px;}/*十字格条纹*/.bg-twelveth {background-image: linear-gradient(0deg, rgba(200, 0, 0, .5) 50%, transparent 50%), linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%);background-size: 40px 40px;}</style></head><body><div class="container"><div class="bg bg-first">示例一</div><div class="bg bg-second">示例二</div><div class="bg bg-third">示例三</div><div class="bg bg-fourth">示例四</div><div class="bg bg-fifth">示例五</div><div class="bg bg-sixth">示例六</div><div class="bg bg-seventh">示例七</div><div class="bg bg-eighth">示例八</div><div class="bg bg-ninth">示例九</div><div class="bg bg-tenth">示例十</div><div class="bg bg-eleventh">示例十一</div><div class="bg bg-twelveth">示例十二</div></div></body></html>

转载地址

https://blog.csdn.net/i_dont_know_a/article/details/88695201

css：实现斑马条纹背景相关推荐

css渐变斑马条纹_创建斑马条纹表
css渐变斑马条纹 Scenario: you are the developer of a website for a band called The Tramps, who have embark ...
css 世界之条纹背景
水平与垂直条纹线性渐变 linear-gradient 需求: 采用 css 实现个横向与纵向的条纹背景,类似如下: 横向条纹首先我们都知道 linear-gradient 属性是用来实现线性渐变 ...
CSS 实现斑马条纹
Part.1 linear-gradient() linear-gradient() 函数用于创建一个线性渐变的 "图像".为了创建一个线性渐变,你需要设置一个起始点和一个方向(指 ...
html怎么做模糊条纹,CSS秘密花园：条纹背景
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
背景是不规则图案css,CSS3 实现花式背景图案
CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景,事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果,例如参照css3patterns.本篇就举几个例子介绍一下它们 ...
html中背景条纹效果,使用CSS线性渐变制作条纹背景
主要使用的属性 linear-gradient background:linear-gradient(#000,#ccc); Paste_Image.png 取消中间的渐变过度 background: ...
CSS 条纹背景秘探
CSS 条纹背景秘探 CSS 条纹背景秘探 CSS 线性渐变 background-size 实现条纹垂直条纹斜向条纹 CSS 条纹背景秘探要想在网页中实现条纹图案,通常,我们的方法是创建一个 ...
html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下一.横向条纹如下代码:background ...
html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍
这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...

css：实现斑马条纹背景

效果

代码

转载地址

css：实现斑马条纹背景相关推荐

最新文章

热门文章