html - 在 CSS 中缩放响应式 SVG-6ren

html - 在 CSS 中缩放响应式 SVG

转载作者：行者123 更新时间：2023-12-04 09:46:08

我想知道如何缩放 SVG 以在每个屏幕尺寸上看起来都不错。这是我所拥有的

作为背景的线性渐变

我需要在上面涂抹 2 个面膜，顶部有空白区域，底部有空白区域

我设法以 320x770 像素的大小重现了我想要的设计，但我正在努力寻找如何使它适合不同的屏幕尺寸或方向。

我创建了一个代码沙箱来展示我的问题(将其打开到 320x770 的新窗口以查看所需的结果)。 https://codesandbox.io/s/blissful-frost-ste6y?file=/pages/index.vue

main section {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wave-wrapper {
  background: linear-gradient(#0e548c, #197d89, #0e548c);
  position: relative;
  overflow: hidden;
}

.above-waves {
  position: relative;
  z-index: 2;
}

.white {
  margin-top: 160px;
  color: #fff;
}

.mask-1,
.mask-2 {
  position: absolute;
  z-index: 1;
  width: 100%;
}

.mask-1__image {
  width: 100%;
  transform: translateY(-53%);
}

.mask-2__image {
  width: 100%;
  transform: translateY(-55%);
}

<main>
    <section>Section A</section>
    <div class="wave-wrapper">
      <div class="mask-1">
        <img class="mask-1__image" src="https://ste6y.sse.codesandbox.io/_nuxt/assets/waves-mask-1.svg" alt="Waves mask 1">
      </div>
      <div class="above-waves">
        <section>Section B</section>
        <section>Section C</section>
      </div>
      <div class="mask-2">
        <img class="mask-2__image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMTI5OS43NTciIHZpZXdCb3g9IjAgMCAzMjAgMTI5OS43NTciPgogIDxnIGlkPSJHcm91cGVfMTAiIGRhdGEtbmFtZT0iR3JvdXBlIDEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjQ3NSAtMTcxOSkiPgogICAgPHBhdGggaWQ9IlRyYWPDg8KpXzMxIiBkYXRhLW5hbWU9IlRyYWPDg8KpIDMxIiBkPSJNLTExNDUsMjE1NC43NTdWOTc5LjA2czMuOTkxLDI1LjU3MiwyNi4zNjksNTMuOTE5LDMzLjgxMiw0MS4zNTUsNjMuMTQyLDU5LjQ2OGMxNy4yMTIsMTAuNjI5LDMyLjk4NywxNy45MzUsNDcuNTc1LDI1LjMzMiw0OS42MiwyNS4xNjEsODYuOTQyLDMzLjc2LDg2Ljk0MiwzMy43NnM1Mi40NTQsNy40NDQsOTUuNSw3Mi4xNzV2OTMxLjA0MloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNDUgODY0KSIgZmlsbD0iI2ZmZiIvPgogICAgPHBhdGggaWQ9IlRyYWPDg8KpXzMyIiBkYXRhLW5hbWU9IlRyYWPDg8KpIDMyIiBkPSJNLTExNDUsODU1cy05LjY4NCw5OC41ODcsNTguNDQ3LDE3My44MzhjMzkuNTE2LDQzLjY0NSwxMTguMTYsODcuMDE5LDE2MC40NDYsMTA1LjE3MiwzMC40LDEzLjA0OSwzNC44OTEsMTEuMjM1LDYyLjIsMzEuNzQ4LDI3LjMzMSwyMy45MTEsMzguNDMsNTguNDQ3LDM4LjQzLDU4LjQ0N3MtMjguNjEtMzkuNDgxLTY0LjEtNTguNDQ3Yy0xMy45ODMtNy40NzMtNDQuNTE5LTE2LjkxNC02OS4yNzctMjYuMzc2LTM3LjM3Ny0xNC4yODUtNzYuMjMyLTMwLjYtMTEwLjY0My01NS43ODEtNTYuNzg0LTQxLjU1NS03NS41MDYtOTkuNTMxLTc1LjUwNi05OS41MzFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTQ1IDg2NCkiIGZpbGw9IiM5M2I1YzUiLz4KICA8L2c+Cjwvc3ZnPgo=" alt="Waves mask 2">
      </div>
    </div>
    <div>
      <section>Section D</section>
    </div>
  </main>

这是我迄今为止尝试过的:

相对于父级缩放 SVG 在某些时候它变得太大

保持原始尺寸，但我最终在侧面显示渐变

最佳答案

我会首先简化您的代码以考虑多个背景，然后我稍微编辑了您的 SVG 并添加了 preserveAspectRatio="none"允许他们扩展:

main section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wave-wrapper {
  background: 
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 320"><g transform="translate(0.234 -830)"><path  d="M-1145,64.915V329.746s22.005-19.129,79.3-16.761,56.2-27.834,73.869-65.12a638.771,638.771,0,0,0,27.089-65.789s-7.336-47.7,40-38.816,99.508-78.345,99.508-78.345V-742.778H-1145Z" transform="translate(1145 762)" fill="%23fff"/><path  d="M-1145,1093.2s-4.7-4.83,28.093-16.427c17.284-6.111,50.688,2.344,71.642-5.336,2.49-.912,20.226-6.871,29.843-19.3,5.073-6.558,14.5-24.414,26.67-49.892a460.544,460.544,0,0,0,19.872-49.015s1.287-31.084,11.2-41.9,29.93-7.273,29.93-7.273,14.885.669,27.688-3.488,25.246-15.641,43.839-33.959a210.939,210.939,0,0,0,30.76-39.311s-17.815,35.666-39.747,59.618-37.356,33.452-48.208,36.191-22.293-.251-30.053,5.818-13.259,15.752-14.209,32.117c-.669,11.521-21.459,52.772-39.6,84-11.908,17.052-29.306,34.514-35.62,36.561-21.333,6.915-44.562,5.125-44.562,5.125s-30.163-1.633-47.047,15.7-20.49,53.617-20.49,53.617Z" transform="translate(1145)" fill="%2393b5c5"/></g></svg>') 
   top / 101% 40%,
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 330"><g  transform="translate(0.475 -1760)"><path  d="M-1145,2154.757V979.06s3.991,25.572,26.369,53.919,33.812,41.355,63.142,59.468c17.212,10.629,32.987,17.935,47.575,25.332,49.62,25.161,86.942,33.76,86.942,33.76s52.454,7.444,95.5,72.175v931.042Z" transform="translate(1145 864)" fill="%23fff"/><path  d="M-1145,855s-9.684,98.587,58.447,173.838c39.516,43.645,118.16,87.019,160.446,105.172,30.4,13.049,34.891,11.235,62.2,31.748,27.331,23.911,38.43,58.447,38.43,58.447s-28.61-39.481-64.1-58.447c-13.983-7.473-44.519-16.914-69.277-26.376-37.377-14.285-76.232-30.6-110.643-55.781-56.784-41.555-75.506-99.531-75.506-99.531Z" transform="translate(1145 864)" fill="%2393b5c5"/></g></svg>')
   bottom / 101% 40%,
   linear-gradient(#0e548c, #197d89, #0e548c);
 background-repeat:no-repeat;
}

<main>
  <section>Section A</section>
  <div class="wave-wrapper">
    <section>Section B</section>
    <section>Section C</section>
  </div>
  <section>Section D</section>
</main>

您可以轻松切换位置:

main section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wave-wrapper {
  background: 
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 320"><g transform="translate(0.234 -830)"><path  d="M-1145,64.915V329.746s22.005-19.129,79.3-16.761,56.2-27.834,73.869-65.12a638.771,638.771,0,0,0,27.089-65.789s-7.336-47.7,40-38.816,99.508-78.345,99.508-78.345V-742.778H-1145Z" transform="translate(1145 762)" fill="%23fff"/><path  d="M-1145,1093.2s-4.7-4.83,28.093-16.427c17.284-6.111,50.688,2.344,71.642-5.336,2.49-.912,20.226-6.871,29.843-19.3,5.073-6.558,14.5-24.414,26.67-49.892a460.544,460.544,0,0,0,19.872-49.015s1.287-31.084,11.2-41.9,29.93-7.273,29.93-7.273,14.885.669,27.688-3.488,25.246-15.641,43.839-33.959a210.939,210.939,0,0,0,30.76-39.311s-17.815,35.666-39.747,59.618-37.356,33.452-48.208,36.191-22.293-.251-30.053,5.818-13.259,15.752-14.209,32.117c-.669,11.521-21.459,52.772-39.6,84-11.908,17.052-29.306,34.514-35.62,36.561-21.333,6.915-44.562,5.125-44.562,5.125s-30.163-1.633-47.047,15.7-20.49,53.617-20.49,53.617Z" transform="translate(1145)" fill="%2393b5c5"/></g></svg>') 
   bottom / 101% 50%,
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 330"><g  transform="translate(0.475 -1760)"><path  d="M-1145,2154.757V979.06s3.991,25.572,26.369,53.919,33.812,41.355,63.142,59.468c17.212,10.629,32.987,17.935,47.575,25.332,49.62,25.161,86.942,33.76,86.942,33.76s52.454,7.444,95.5,72.175v931.042Z" transform="translate(1145 864)" fill="%23fff"/><path  d="M-1145,855s-9.684,98.587,58.447,173.838c39.516,43.645,118.16,87.019,160.446,105.172,30.4,13.049,34.891,11.235,62.2,31.748,27.331,23.911,38.43,58.447,38.43,58.447s-28.61-39.481-64.1-58.447c-13.983-7.473-44.519-16.914-69.277-26.376-37.377-14.285-76.232-30.6-110.643-55.781-56.784-41.555-75.506-99.531-75.506-99.531Z" transform="translate(1145 864)" fill="%2393b5c5"/></g></svg>')
   top / 101% 50%,
   linear-gradient(#0e548c, #197d89, #0e548c);
 background-repeat:no-repeat;
}

<main>
  <section>Section A</section>
  <div class="wave-wrapper">
    <section>Section B</section>
    <section>Section C</section>
  </div>
  <section>Section D</section>
</main>

每个部分如下所示:

main section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

section:nth-child(2) {
  background:
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 320"><g transform="translate(0.234 -830)"><path  d="M-1145,64.915V329.746s22.005-19.129,79.3-16.761,56.2-27.834,73.869-65.12a638.771,638.771,0,0,0,27.089-65.789s-7.336-47.7,40-38.816,99.508-78.345,99.508-78.345V-742.778H-1145Z" transform="translate(1145 762)" fill="%23fff"/><path  d="M-1145,1093.2s-4.7-4.83,28.093-16.427c17.284-6.111,50.688,2.344,71.642-5.336,2.49-.912,20.226-6.871,29.843-19.3,5.073-6.558,14.5-24.414,26.67-49.892a460.544,460.544,0,0,0,19.872-49.015s1.287-31.084,11.2-41.9,29.93-7.273,29.93-7.273,14.885.669,27.688-3.488,25.246-15.641,43.839-33.959a210.939,210.939,0,0,0,30.76-39.311s-17.815,35.666-39.747,59.618-37.356,33.452-48.208,36.191-22.293-.251-30.053,5.818-13.259,15.752-14.209,32.117c-.669,11.521-21.459,52.772-39.6,84-11.908,17.052-29.306,34.514-35.62,36.561-21.333,6.915-44.562,5.125-44.562,5.125s-30.163-1.633-47.047,15.7-20.49,53.617-20.49,53.617Z" transform="translate(1145)" fill="%2393b5c5"/></g></svg>')
   top right/101% 80% no-repeat, 
   linear-gradient(#0e548c, #197d89);
}

section:nth-child(3) {
  background: 
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 330"><g  transform="translate(0.475 -1760)"><path  d="M-1145,2154.757V979.06s3.991,25.572,26.369,53.919,33.812,41.355,63.142,59.468c17.212,10.629,32.987,17.935,47.575,25.332,49.62,25.161,86.942,33.76,86.942,33.76s52.454,7.444,95.5,72.175v931.042Z" transform="translate(1145 864)" fill="%23fff"/><path  d="M-1145,855s-9.684,98.587,58.447,173.838c39.516,43.645,118.16,87.019,160.446,105.172,30.4,13.049,34.891,11.235,62.2,31.748,27.331,23.911,38.43,58.447,38.43,58.447s-28.61-39.481-64.1-58.447c-13.983-7.473-44.519-16.914-69.277-26.376-37.377-14.285-76.232-30.6-110.643-55.781-56.784-41.555-75.506-99.531-75.506-99.531Z" transform="translate(1145 864)" fill="%2393b5c5"/></g></svg>')
   bottom right/101% 80% no-repeat, 
   linear-gradient(#197d89, #0e548c);
}

<main>
  <section>Section A</section>
  <section>Section B</section>
  <section>Section C</section>
  <section>Section D</section>
</main>

作为奖励，您还可以考虑使蒙版具有透明度而不是白色:

:root {
  --svg1:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 320"><g transform="translate(0.234 -830)"><path  d="M-1145,64.915V329.746s22.005-19.129,79.3-16.761,56.2-27.834,73.869-65.12a638.771,638.771,0,0,0,27.089-65.789s-7.336-47.7,40-38.816,99.508-78.345,99.508-78.345V-742.778H-1145Z" transform="translate(1145 762)" fill="%23fff"/><path  d="M-1145,1093.2s-4.7-4.83,28.093-16.427c17.284-6.111,50.688,2.344,71.642-5.336,2.49-.912,20.226-6.871,29.843-19.3,5.073-6.558,14.5-24.414,26.67-49.892a460.544,460.544,0,0,0,19.872-49.015s1.287-31.084,11.2-41.9,29.93-7.273,29.93-7.273,14.885.669,27.688-3.488,25.246-15.641,43.839-33.959a210.939,210.939,0,0,0,30.76-39.311s-17.815,35.666-39.747,59.618-37.356,33.452-48.208,36.191-22.293-.251-30.053,5.818-13.259,15.752-14.209,32.117c-.669,11.521-21.459,52.772-39.6,84-11.908,17.052-29.306,34.514-35.62,36.561-21.333,6.915-44.562,5.125-44.562,5.125s-30.163-1.633-47.047,15.7-20.49,53.617-20.49,53.617Z" transform="translate(1145)" fill="%2393b5c5"/></g></svg>');
  --svg1-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 320"><g transform="translate(0.234 -830)"><path  d="M-1145,64.915V329.746s22.005-19.129,79.3-16.761,56.2-27.834,73.869-65.12a638.771,638.771,0,0,0,27.089-65.789s-7.336-47.7,40-38.816,99.508-78.345,99.508-78.345V-742.778H-1145Z" transform="translate(1145 762)" fill="%23fff"/></g></svg>');
  --svg2:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 330"><g  transform="translate(0.475 -1760)"><path  d="M-1145,2154.757V979.06s3.991,25.572,26.369,53.919,33.812,41.355,63.142,59.468c17.212,10.629,32.987,17.935,47.575,25.332,49.62,25.161,86.942,33.76,86.942,33.76s52.454,7.444,95.5,72.175v931.042Z" transform="translate(1145 864)" fill="%23fff"/><path  d="M-1145,855s-9.684,98.587,58.447,173.838c39.516,43.645,118.16,87.019,160.446,105.172,30.4,13.049,34.891,11.235,62.2,31.748,27.331,23.911,38.43,58.447,38.43,58.447s-28.61-39.481-64.1-58.447c-13.983-7.473-44.519-16.914-69.277-26.376-37.377-14.285-76.232-30.6-110.643-55.781-56.784-41.555-75.506-99.531-75.506-99.531Z" transform="translate(1145 864)" fill="%2393b5c5"/></g></svg>');
  --svg2-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"  viewBox="0 0 320 330"><g  transform="translate(0.475 -1760)"><path  d="M-1145,2154.757V979.06s3.991,25.572,26.369,53.919,33.812,41.355,63.142,59.468c17.212,10.629,32.987,17.935,47.575,25.332,49.62,25.161,86.942,33.76,86.942,33.76s52.454,7.444,95.5,72.175v931.042Z" transform="translate(1145 864)" fill="%23fff"/></g></svg>');
}

main section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position:relative;
  z-index:0;
}

section:nth-child(2):before,
section:nth-child(3):before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  
  --s:101% 80%; /* control the height(80%) to adjust the SVG */
  /* Mask */
  -webkit-mask:
     var(--m),
     linear-gradient(#fff,#fff);
          mask:
     var(--m),
     linear-gradient(#fff,#fff);
  -webkit-mask-size: var(--s),100% 100%;
          mask-size: var(--s),100% 100%;
  -webkit-mask-position:var(--p);
          mask-position:var(--p);
  -webkit-mask-composite:destination-out;
          mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  /* background */
  background:
     var(--b) var(--p)/var(--s), 
     linear-gradient(var(--d),#0e548c, #197d89);
  background-repeat: no-repeat;
}

section:nth-child(2) {
  --m:var(--svg1-mask);
  --p:top right;
  --b:var(--svg1);
  --d:180deg;
}

section:nth-child(3) {
  --m:var(--svg2-mask);
  --p:bottom right;
  --b:var(--svg2);
  --d:0deg;
}

body {
  background:grey;
  margin:0;
}

<main>
  <section>Section A</section>
  <section>Section B</section>
  <section>Section C</section>
  <section>Section D</section>
</main>

关于html - 在 CSS 中缩放响应式 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62104233/

文章推荐： Swift didSet for var 使用@Binding 在 child 中改变

文章推荐： Android 低于 api 23 无法连接到服务器

文章推荐： css - React 导入样式文件的快捷方式

php - Ajax 响应 HTML 响应
我正在尝试检查 Entry 中是否存在重复项，并使用内联消息提醒用户该数字存在。 $(document).ready(function(){ $("#con1").blur(function(
python - 如何在基于类的 View 中返回 JSON 响应，而不是 HTTP 响应
我有一个基于类的 View 。我在引导模式上使用 Ajax。为了避免页面刷新，我想使用此类基于 View 返回 JSON 响应而不是 HTTP 响应，但我只看到了如何为基于函数的 View 返回 JS
C# Hue Bridge PUT 发送 OK 响应。无 API 响应
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
http-status-codes - 根除 401 "Unauthorised"响应，然后是 200 "Ok"响应
我有一个大型内部企业基于 Web 的应用程序在 IIS6 上运行 ASP.NET 3.5，生成 401 个“未经授权”响应，然后是 200 个“Ok”响应(如 Fiddler 所述)。我知道为什么会发
javascript - Express 不会从一个 Controller 返回 HTTP 响应，但在其他 Controller 中会返回 HTTP 响应
感谢您研究我的问题。我有一个node/express服务器，配置了一个server.js文件，它调用urls.js，而urls.js又调用 Controller 来处理http请求，所有这些都配置相
node.js - Curl 正在获取 POST 响应，但 Node.js 未获取 POST 响应
当我使用以下命令时，我得到正确的 JSON 响应: $ curl --data "regno=&dob=&mobile=" https://vitacademics-rel.herokuapp.co
RESTful POST 响应
我有一个非常简单的 RESTful 服务，它通过 POST 接收一些表单数据，其目的是在云存储(Amazon S3、Azure Blob 存储等)中简单地保留文本主体(具有唯一 ID)作为一个文件..
sockets - UDP 响应
UDP 不发送任何 ack，但它会发送任何响应吗？我已经设置了客户端服务器UDP程序。如果我让客户端向不存在的服务器发送数据，那么客户端会收到任何响应吗？我的假设是；客户端 --> 广播服务器地
scala - 如何在电梯中记录请求/响应
我有一个电梯项目，其中有一个扩展 RestHelper 的类，看起来像这样 serve{ "api" / "mystuff" prefix { case a
Kong 自定义错误消息/响应
我们正在寻求覆盖 Kong 错误响应结构并编写自定义消息(即用我们的自定义消息替换“超出 API 速率限制”、“无效的身份验证凭据”等)。我们要找的错误响应结构(代码是自定义的内部错误代码，与HTT
iphone - 响应 EKEventStoreChangedNotification
我正在尝试监听 EKEventStoreChangedNotification 以检查当我的应用程序处于后台时日历是否已更改。我在 View Controller 的 initWithNibMeth
javascript - 响应.写入divIDE
我了解 javascript，并且正在学习 ASP.NET C# 我想要做什么(完成的是javascript): document.getElementById('divID-1'
java - 在Java中的BrowserMob中仅获取POST请求/响应
是否可以过滤所有 har 对象并仅获取 POST 请求/响应？也许在初始化 BrowserMobProxyServer 期间是这样做的方法？我需要将 har 对象保存到文件中并上传到 har 查看器。
php - Symfony2 响应
我正在尝试向 Oauth 的 API 发送响应。遗憾的是，Symfony2 文档在解释 $response->headers->set(...); 的所有不同部分方面做得很差。这是我的 OauthC
python 响应 - 并非所有请求都已执行
我正在尝试测试用例来模拟 api 调用，并使用 python 响应来模拟 api 调用。下面是我的模拟， with responses.RequestsMock() as rsps: url
haskell - 我将如何以可扩展的方式抽象命令/响应？
在尝试在 Haskell 中进行一些领域驱动设计时，我发现自己遇到了这个问题: data FetchAccessories = FetchAccessories data AccessoriesRes
java - 如何在项目reactor中设置阻塞异步请求/响应？
我正在与 ANT+ USB 棒连接，并用项目 react 器替换我自己天真的“MessageBus”，因为它看起来非常合适。 USB接口(interface)本质上是异步的(单独的输入/输出管道)，我
ios - 如何使用AFHTTPSessionManager记录每个请求/响应？
我正在将项目迁移到AFNetworking 2.0。使用AFNetworking 1.0时，我编写了代码来记录控制台中的每个请求/响应。这是代码: -(AFHTTPRequestOperation *
php - Ajax 响应
我有以下代码段。 ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){
来自帖子的 Jquery 响应
我有问题......我在 php 中有一个监听器脚本可以执行以下操作: if ($count != 1) {echo 'no';} else { echo "yes";} 因此它会回显"is"或“

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 在 CSS 中缩放响应式 SVG