正方形渐变的多个实例

前端问题 得得之家
Multiple instances of a square gradient(正方形渐变的多个实例)
本文介绍了正方形渐变的多个实例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何重复平方渐变？

在提供的代码中，我以8种不同的方式绘制了方形渐变。

  1. 若要能够重复方形渐变，我将使用这些代码中的哪一个？

  2. 将如何完成？

https://jsfiddle.net/7s468kwg/

这是1个正方形，我如何让此正方形重复多次？

这就是我正在尝试做的。

重复如下：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  width: 530px;
  height: 530px;
}


.box1 {
  height: 170px;
  width: 170px;
  margin: 0 5px 5px 0;
  background:
    linear-gradient(teal, teal) center / 10px 10px no-repeat,
    linear-gradient(black, black) center / 20px 20px no-repeat,
    linear-gradient(orange, orange) center / 30px 30px no-repeat,
    linear-gradient(black, black) center / 40px 40px no-repeat,
    linear-gradient(teal, teal) center / 50px 50px no-repeat,
    linear-gradient(black, black) center / 60px 60px no-repeat,
    linear-gradient(orange, orange) center / 70px 70px no-repeat,
    linear-gradient(black, black) center / 80px 80px no-repeat,
    linear-gradient(teal, teal) center / 90px 90px no-repeat,
    linear-gradient(black, black) center / 100px 100px no-repeat,
    linear-gradient(orange, orange) center / 110px 110px no-repeat,
    linear-gradient(black, black) center / 120px 120px no-repeat,
    linear-gradient(teal, teal) center / 130px 130px no-repeat,
    linear-gradient(black, black) center / 140px 140px no-repeat,
    linear-gradient(orange, orange) center / 150px 150px no-repeat,
    linear-gradient(black, black) center / 160px 160px no-repeat,
    linear-gradient(teal, teal) center / 170px 170px no-repeat;
  background-repeat: no-repeat;
}

.box2 {
  width: 170px;
  height: 170px;
  margin: 0 5px 5px 5px;
  box-shadow:
    inset 0 0 0 5px teal, inset 0 0 0 10px black,
    inset 0 0 0 15px orange, inset 0 0 0 20px black, inset 0 0 0 25px teal,
    inset 0 0 0 30px black, inset 0 0 0 35px orange, inset 0 0 0 40px black,
    inset 0 0 0 45px teal, inset 0 0 0 50px black, inset 0 0 0 55px orange,
    inset 0 0 0 60px black, inset 0 0 0 65px teal, inset 0 0 0 70px black,
    inset 0 0 0 75px orange, inset 0 0 0 80px black, inset 0 0 0 85px teal;
}

.box3 {
  width: 170px;
  height: 170px;
  margin: 0 0 5px 5px;
  box-shadow:
    inset 0 0 0 5px teal, inset 0 0 0 10px black,
    inset 0 0 0 15px orange, inset 0 0 0 20px black, inset 0 0 0 25px teal,
    inset 0 0 0 30px black, inset 0 0 0 35px orange, inset 0 0 0 40px black,
    inset 0 0 0 45px teal, inset 0 0 0 50px black, inset 0 0 0 55px orange,
    inset 0 0 0 60px black, inset 0 0 0 65px teal, inset 0 0 0 70px black,
    inset 0 0 0 75px orange, inset 0 0 0 80px black, inset 0 0 0 85px teal;
}

.box4 {
    height: 170px;
  width: 170px;
  margin: 5px 5px 5px 0;
  background: repeating-linear-gradient(teal 0 5px, black 0 10px, orange 0 15px, black 0 20px);
  background-size: 100% 50%;
}

.box4::before {
  content: "";
  display: block;
  padding-top: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
  transform: rotate(90deg);
}

.box5 {
   height: 170px;
  width: 170px;
  margin: 5px 5px 5px 5px;
  background:
    repeating-linear-gradient(0deg, teal 0 5px, black 0 10px, orange 0 15px, black 0 20px) top,
    repeating-linear-gradient(180deg, teal 0 5px, black 0 10px, orange 0 15px, black 0 20px) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

.box5::before {
  content: "";
  display: block;
  padding-top: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
  transform: rotate(90deg);
}

.box6 {
  width: 170px;
  height: 170px;
  margin: 5px 0 0 5px;
}

.box7 {
  width: 170px;
  height: 170px;
  margin: 5px 5px 0 0;
}

.color1 {
  border: 5px solid teal;
}

.color2 {
  border: 5px solid black;
}

.color3 {
  border: 5px solid orange;
}

.color4 {
  border: 5px solid black;
}

.color5 {
  border: 5px solid teal;
}

.color6 {
  border: 5px solid black;
}

.color7 {
  border: 5px solid orange;
}

.color8 {
  border: 5px solid black;
}

.color9 {
  border: 5px solid teal;
}

.color10 {
  border: 5px solid black;
}

.color11 {
  border: 5px solid orange;
}

.color12 {
  border: 5px solid black;
}

.color13 {
  border: 5px solid teal;
}

.color14 {
  border: 5px solid black;
}

.color15 {
  border: 5px solid orange;
}

.color16 {
  border: 5px solid black;
}

.color17 {
  border: 5px solid teal;
}

.box8 {
  width: 0;
  margin: 90px 90px 90px 90px;
  box-shadow:
    0 0 0 5px teal, 0 0 0 10px black, 0 0 0 15px orange,
    0 0 0 20px black, 0 0 0 25px teal, 0 0 0 30px black, 0 0 0 35px orange,
    0 0 0 40px black, 0 0 0 45px teal, 0 0 0 50px black, 0 0 0 55px orange,
    0 0 0 60px black, 0 0 0 65px teal, 0 0 0 70px black, 0 0 0 75px orange,
    0 0 0 80px black, 0 0 0 85px teal;
}
<div class="container">

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>


<svg class="box6" width="170" height="170" viewBox="0 0 170 170">
  <rect x="0" y="0" width="170" height="170" fill="teal" />
  <rect x="5" y="5" width="160" height="160" fill="black" />
  <rect x="10" y="10" width="150" height="150" fill="orange" />
  <rect x="15" y="15" width="140" height="140" fill="black" />
  <rect x="20" y="20" width="130" height="130" fill="teal" />
  <rect x="25" y="25" width="120" height="120" fill="black" />
  <rect x="30" y="30" width="110" height="110" fill="orange" />
  <rect x="35" y="35" width="100" height="100" fill="black" />
  <rect x="40" y="40" width="90" height="90" fill="teal" />
  <rect x="45" y="45" width="80" height="80" fill="black" />
  <rect x="50" y="50" width="70" height="70" fill="orange" />
  <rect x="55" y="55" width="60" height="60" fill="black" />
  <rect x="60" y="60" width="50" height="50" fill="teal" />
  <rect x="65" y="65" width="40" height="40" fill="black" />
  <rect x="70" y="70" width="30" height="30" fill="orange" />
  <rect x="75" y="75" width="20" height="20" fill="black" />
  <rect x="80" y="80" width="10" height="10" fill="teal" />
</svg>

     <div class="box7">
      <div class="color1">
        <div class="color2">
          <div class="color3">
            <div class="color4">
              <div class="color5">
                <div class="color6">
                  <div class="color7">
                    <div class="color8">
                      <div class="color9">
                        <div class="color10">
                          <div class="color11">
                            <div class="color12">
                              <div class="color13">
                                <div class="color14">
                                  <div class="color15">
                                    <div class="color16">
                                      <div class="color17">
                                      
                                     
                                      </div>
                                      
                                      
                                       
                                      
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="box8"></div>
    
</div>

推荐答案

将svg用作background-image可能是最佳方式。

您可以根据需要显式设置background-repeat。默认值为repeat(请参阅代码段CSS中的注释)。

我建议将SVG分离到它自己的文件，并使用该文件的URL。

还可以在CSS中以内联方式使用它，如下所示：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  width: 530px;
  height: 530px;
}

.bg-repeating-squares {
  /* Repeat a background image both vertically and horizontally (this is default): */
  background-repeat: repeat;
  /* Repeat a background image only vertically: */
  /*background-repeat: repeat-y;*/
  /* Repeat a background image only horizontally: */
  /*background-repeat: repeat-x;*/
  
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='175' height='175' viewBox='0 0 175 175'><rect x='0' y='0' width='5' height='175' fill='white'/> <rect x= '0' y= '0' width= '175' height= '5' fill= 'white' /> <rect x= '5' y= '5' width= '170' height= '170' fill= 'teal' /> <rect x= '10' y= '10' width= '160' height= '160' fill= 'black' /> <rect x= '15' y= '15' width= '150' height= '150' fill= 'orange' /> <rect x= '20' y= '20' width= '140' height= '140' fill= 'black' /> <rect x= '25' y= '25' width= '130' height= '130' fill= 'teal' /> <rect x= '30' y= '30' width= '120' height= '120' fill= 'black' /> <rect x= '35' y= '35' width= '110' height= '110' fill= 'orange' /> <rect x= '40' y= '40' width= '100' height= '100' fill= 'black' /> <rect x= '45' y= '45' width= '90' height= '90' fill= 'teal' /> <rect x= '50' y= '50' width= '80' height= '80' fill= 'black' /> <rect x= '55' y= '55' width= '70' height= '70' fill= 'orange' /> <rect x= '60' y= '60' width= '60' height= '60' fill= 'black' /> <rect x= '65' y= '65' width= '50' height= '50' fill= 'teal' /> <rect x= '70' y= '70' width= '40' height= '40' fill= 'black' /> <rect x= '75' y= '75' width= '30' height= '30' fill= 'orange' /> <rect x= '80' y= '80' width= '20' height= '20' fill= 'black' /> <rect x= '85' y= '85' width= '10' height= '10' fill= 'teal' /> </svg> ");
}
<div class="container bg-repeating-squares"></div>

(我确实更改了您的图形，将5px的白色添加到顶部，并留下来说明您使用的5px页边距)

<svg width="175" height="175" viewBox="0 0 175 175">
  <rect x="0" y="0" width="5" height="175" fill="white"/>
  <rect x="0" y="0" width="175" height="5" fill="white"/>
  <rect x="5" y="5" width="170" height="170" fill="teal"/>
  <rect x="10" y="10" width="160" height="160" fill="black"/>
  <rect x="15" y="15" width="150" height="150" fill="orange"/>
  <rect x="20" y="20" width="140" height="140" fill="black"/>
  <rect x="25" y="25" width="130" height="130" fill="teal"/>
  <rect x="30" y="30" width="120" height="120" fill="black"/>
  <rect x="35" y="35" width="110" height="110" fill="orange"/>
  <rect x="40" y="40" width="100" height="100" fill="black"/>
  <rect x="45" y="45" width="90" height="90" fill="teal"/>
  <rect x="50" y="50" width="80" height="80" fill="black"/>
  <rect x="55" y="55" width="70" height="70" fill="orange"/>
  <rect x="60" y="60" width="60" height="60" fill="black"/>
  <rect x="65" y="65" width="50" height="50" fill="teal"/>
  <rect x="70" y="70" width="40" height="40" fill="black"/>
  <rect x="75" y="75" width="30" height="30" fill="orange"/>
  <rect x="80" y="80" width="20" height="20" fill="black"/>
  <rect x="85" y="85" width="10" height="10" fill="teal"/>
</svg>

这篇关于正方形渐变的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

Wkhtmltopdf print-media-type仅使用@media print，而忽略其余内容
wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print，而忽略其余内容)
使用Node-Sass缩小CSS
Minify CSS with Node-sass(使用Node-Sass缩小CSS)
如何旋转外部div而不是内部内容
How to rotate outer div not inner content(如何旋转外部div而不是内部内容)
如何对父级悬停时的子级应用CSS变换
how to apply css transform to child on parent hover(如何对父级悬停时的子级应用CSS变换)
是否仅在css中转换转换？
Only transition a transform in css?(是否仅在css中转换转换？)
Css转换不会更改css布局
CSS transform doesn#39;t change CSS layout(Css转换不会更改css布局)
前端问题php问题Java问题Python问题C/C++问题C#/.NET问题移动开发问题数据库问题
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式