具有非均匀背景的块内的渐变边框

Question

Isaev

Asked:2023-10-22 00:22:17 +0000 UTC2023-10-22 00:22:17 +0000 UTC 2023-10-22 00:22:17 +0000 UTC

如何制作换桌效果？

772

如何产生这样的效果呢？建议随机做，不加载准备好的图片，并且让间隙之间有背景……如果可以的话，应该是表格行元素，这样方便嵌入，但不是必须的。

2 个回答

Voted

UModeL · Answer 1 · 2023-10-23T00:35:09Z

使用 SVG 蒙版来模拟间隙并将阴影应用于整个表格：

/* For example only --> */ body { margin: 0; min-height: 100vh; background: url('https://isstatic.askoverflow.dev/eaA0w.png') -50% -50% / cover repeat, #fd7; background-blend-mode: overlay; }

table {
  /* For example only --> */ position: relative; top: 5px; left: 5px;
  height: auto; width: 320px;
  border: none; border-spacing: 1px;
  filter: 
    /* Цвет линий и обводки (дублируется для контраста) */ 
    drop-shadow(0 0 1px #000) drop-shadow(0 0 #000)
    /* Падающая тень */ 
    drop-shadow(8px 8px 8px #0006);
}
table th,
table td {
  height: 20px; width: 30px;
  padding: 0 3px;
  font-size: 15px;
  white-space: nowrap;
}
table th {
  padding: 0 9px;
  font-weight: normal;
  background-color: #aab8d7;
}
table tr:first-of-type th {
  height: 36px;
  font-weight: bold;
}
table td:last-of-type { text-align: center; }

/* "Зебра" */
table tr:nth-of-type(even) td { background-color: #c8deee; }
table tr:nth-of-type(odd) td { background-color: #ddebf4; }

/* Строка с разрывом = Количество строк после разрыва + 1 */
table tr:nth-last-of-type(3) {
  --mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 321 26" width="321"><polyline points="0,5 10,14 16,7 29,16 34,7 41,15 55,6 64,16 79,7 94,17 108,7 114,16 121,7 149,16 172,7 185,18 202,6 214,17 220,7 237,19 259,7 267,16 282,7 299,19 308,7 313,16 321,5" fill="none" stroke="black" stroke-width="8" stroke-linecap="square"/></svg>');
  --mask: var(--mask-image) 0 50% / contain repeat-x, linear-gradient(#fff 0 0) 0 0 / 100% 100% repeat-x;
  -webkit-mask: var(--mask); mask: var(--mask);
  -webkit-mask-composite: xor; mask-composite: exclude;
  user-select: none;
}
table tr:nth-last-of-type(3) th,
table tr:nth-last-of-type(3) td {
  height: 30px;
  font-size: 0;
}

/* Диапазон скрываемых строк: 
   10 = Строка заголовка + Количество строк до разрыва + 1 
   4 = Строка с разрывом + Количество строк после разрыва + 1 */
table tr:nth-last-of-type(n+4):nth-of-type(n+10) { display: none; }

<table>
  <tr><th>Platz</th><th>Zeit</th><th>Name</th><th>Nummer</th></tr>
  <tr><th>1</th><td>5:11:45</td><td>Henker, Jan</td><td>5841</td></tr>
  <tr><th>2</th><td>5:49:12</td><td>Godel, Dieter</td><td>6476</td></tr>
  <tr><th>3</th><td>6:21:59</td><td>Hormanski, Piotr</td><td>5796</td></tr>
  <tr><th>4</th><td>7:04:32</td><td>Frohlich, Andy</td><td>6031</td></tr>
  <tr><th>5</th><td>7:19:04</td><td>Kruger, Christoph</td><td>5120</td></tr>
  <tr><th>6</th><td>7:41:53</td><td>Prohl, Melanie</td><td>5009</td></tr>
  <tr><th>7</th><td>7:41:56</td><td>Prohl, Christian</td><td>5010</td></tr>
  <tr><th>8</th><td>7:42:07</td><td>Humy-Zimmer, Cindy</td><td>5333</td></tr>
  <tr><th>9</th><td>TIME</td><td>NAMES</td><td>NUM</td></tr>
  <tr><th>10</th><td>TIME</td><td>NAMES</td><td>NUM</td></tr>
  <tr><th>11</th><td>TIME</td><td>NAMES</td><td>NUM</td></tr>
  <tr><th>12</th><td>TIME</td><td>NAMES</td><td>NUM</td></tr>
  <tr><th>13</th><td>TIME</td><td>NAMES</td><td>NUM</td></tr>
  <tr><th>14</th><td>TIME</td><td>NAMES</td><td>NUM</td></tr>
  <tr><th>15</th><td>8:37:27</td><td>Kretzschmar, Stefan</td><td>5681</td></tr>
  <tr><th>16</th><td>8:38:32</td><td>Purath, Andreas</td><td>6300</td></tr>
  <tr><th contenteditable>17</th><td contenteditable>8:41:09</td><td contenteditable>Cramer, Doreen</td><td contenteditable>5033</td></tr>
</table>

最后一行单元格是可编辑的。尝试更改其中的文本以检查它们的适应性。

如果标记是现成的（即，带有 PHP 在没有数据时“生成”的断行），并且不需要隐藏任何行，那么一切就更简单了 - 您需要向此断点添加一些类根据类而不是索引对其进行行和样式设置。

/* For example only --> */ body { margin: 0; min-height: 100vh; background: url('https://isstatic.askoverflow.dev/eaA0w.png') -50% -50% / cover repeat, #fd7; background-blend-mode: overlay; }

table {
  /* For example only --> */ position: relative; top: 5px; left: 5px;
  height: auto; width: 320px;
  border: none; border-spacing: 1px;
  filter: 
    /* Цвет линий и обводки (дублируется для контраста) */ 
    drop-shadow(0 0 1px #000) drop-shadow(0 0 #000)
    /* Падающая тень */ 
    drop-shadow(8px 8px 8px #0006);
  --mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 321 26" width="321"><polyline points="0,5 10,14 16,7 29,16 34,7 41,15 55,6 64,16 79,7 94,17 108,7 114,16 121,7 149,16 172,7 185,18 202,6 214,17 220,7 237,19 259,7 267,16 282,7 299,19 308,7 313,16 321,5" fill="none" stroke="black" stroke-width="8" stroke-linecap="square"/></svg>');
}
table th,
table td {
  height: 20px; width: 30px;
  padding: 0 3px;
  font-size: 15px;
  white-space: nowrap;
}
table th {
  padding: 0 9px;
  font-weight: normal;
  background-color: #aab8d7;
}
table tr:first-of-type th {
  height: 36px;
  font-weight: bold;
}
table td:last-of-type { text-align: center; }

/* "Зебра" */
table tr:nth-of-type(even) td { background-color: #c8deee; }
table tr:nth-of-type(odd) td { background-color: #ddebf4; }

/* Строка с разрывом */
table tr.break {
  --mask: var(--mask-image) 0 50% / auto repeat-x, linear-gradient(#fff 0 0) 0 0 / 100% 100% repeat-x;
  -webkit-mask: var(--mask); mask: var(--mask);
  -webkit-mask-composite: xor; mask-composite: exclude;
  user-select: none;
}
table tr.break th,
table tr.break td {
  height: 30px;
  font-size: 0;
}
/* Строка с обрывом */
table tr:last-of-type {
  --mask: var(--mask-image) 0 50% / auto repeat-x, var(--mask-image) 0 100% / auto repeat-x, linear-gradient(#fff 0 0) 0 0% / 100% 55% repeat-x;
  -webkit-mask: var(--mask); mask: var(--mask);
  -webkit-mask-composite: destination-over; mask-composite: add;
}
table tr:last-of-type th,
table tr:last-of-type td {
  height: 35px;
  vertical-align: top;
}

<table>
  <tr><th>Platz</th><th>Zeit</th><th>Name</th><th>Nummer</th></tr>
  <tr><th>1</th><td>5:11:45</td><td>Henker, Jan</td><td>5841</td></tr>
  <tr><th>2</th><td>5:49:12</td><td>Godel, Dieter</td><td>6476</td></tr>
  <tr class="break"><th>9</th><td>TIME</td><td>NAMES</td><td>NUM</td></tr>
  <tr><th>5</th><td>7:19:04</td><td>Kruger, Christoph</td><td>5120</td></tr>
  <tr><th>6</th><td>7:41:53</td><td>Prohl, Melanie</td><td>5009</td></tr>
  <tr><th>7</th><td>7:41:56</td><td>Prohl, Christian</td><td>5010</td></tr>
  <tr><th>8</th><td>7:42:07</td><td>Humy-Zimmer, Cindy</td><td>5333</td></tr>
  <tr class="break"><th>9</th><td>TIME</td><td>NAMES</td><td>NUM</td></tr>
  <tr><th>15</th><td>8:37:27</td><td>Kretzschmar, Stefan</td><td>5681</td></tr>
  <tr><th>16</th><td>8:38:32</td><td>Purath, Andreas</td><td>6300</td></tr>
  <tr><th contenteditable>17</th><td contenteditable>8:41:09</td><td contenteditable>Cramer, Doreen</td><td contenteditable>5033</td></tr>
</table>

BlackStar1991 · Answer 2 · 2023-10-22T03:00:52Z

我想出了这个解决方案。隐藏从 6 到 9（含）的所有行

body {
  margin: 0;
}

table {
  border-spacing: 0px;
  border-collapse: collapse;
}

thead {
  background-color: pink;
}

th,
td {
  padding: 10px;
  border: 1px solid #000;
}

tr {
  position: relative;
}

tr:nth-child(n+5):nth-child(-n+7) {
  display: none;
}

tr:nth-child(n+6):nth-child(-n+8) {
 font-size: 0;
}

tr:nth-child(8)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: calc(100% + 2px );
  height: 30px;
  background-color: #f00;
  z-index: 2;
}

<table>
<thead>
  <tr>
    <th>План</th>
    <th>Время</th>
    <th>Имя</th>
    <th>Номер</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>9</td>
  </tr>
   <tr>
    <td>10</td>
    <td>10-00</td>
    <td>Имя</td>
    <td>10</td>
  </tr>
  
  
</tbody>
</table>

您可以附加自己的带有这些波浪和裂缝的图片，而不是红色背景。高度取决于单元格的大小......尽管从性能角度来看这是一个糟糕的解决方案。将服务器上的表输出分成 2 个输出周期会更正确。所以，这是有条件的隐藏......

如何制作换桌效果？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

如何制作换桌效果？

2 个回答

相关问题