스크립트 & 소스코드 공유

.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* 容器必须有固定高度
* 且高度大于最高的列高 */
height: 660px;

/* 非必须 */
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
width: 60%;
margin: 40px auto;
counter-reset: items;
}

.item {
width: 32%;
/* 非必须 */
position: relative;
margin-bottom: 2%;
border-radius: 3px;
background-color: #a1cbfa;
border: 1px solid #4290e2;
box-shadow: 0 2px 2px rgba(0,90,250,0.05),
0 4px 4px rgba(0,90,250,0.05),
0 8px 8px rgba(0,90,250,0.05),
0 16px 16px rgba(0,90,250,0.05);
color: #fff;
padding: 15px;
box-sizing: border-box;
}

/* 仅用于打印数字 */
.item::before {
counter-increment: items;
content: counter(items);
}

/* 将内容块重排为3列 */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* 强制换列 */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}

<div class="container">
<div class="item" style="height: 140px">1</div>
<div class="item" style="height: 190px">2</div>
<div class="item" style="height: 170px">3</div>
<div class="item" style="height: 120px">4</div>
<div class="item" style="height: 160px">5</div>
<div class="item" style="height: 180px">6</div>
<div class="item" style="height: 140px">7</div>
<div class="item" style="height: 150px">8</div>
<div class="item" style="height: 170px">9</div>
<div class="item" style="height: 170px">10</div>
</div>

<style type="text/css">
H2{text-align:center; font-size:5em; color:blue; animation:spread 1s ease-in-out infinite alternate }

@keyframes spread{
to{
color:red;
}
}
</style>

<h2>미래를 향한 기업</h2>

换行符为“\A”或者“\a”都可以。

不要缺少white-space: pre

:before {
content: "本站不支持IE内核浏览器。\A请使用其他浏览器访问本站。";
white-space: pre;
}

mix-blend-mode: normal; //正常

mix-blend-mode: multiply; //正片叠底

mix-blend-mode: screen; //滤色

mix-blend-mode: overlay; //叠加

mix-blend-mode: darken; //变暗

mix-blend-mode: lighten; //变亮

mix-blend-mode: color-dodge; //颜色减淡

mix-blend-mode: color-burn; //颜色加深

mix-blend-mode: hard-light; //强光

mix-blend-mode: soft-light; //柔光

mix-blend-mode: difference; //差值

mix-blend-mode: exclusion; //排除

mix-blend-mode: hue; //色相

mix-blend-mode: saturation; //饱和度

mix-blend-mode: color; //颜色

mix-blend-mode: luminosity; //亮度

mix-blend-mode: initial; //初始

mix-blend-mode: inherit; //继承

mix-blend-mode: unset; //复原

这里就是div自己的背景图片和自己的背景颜色混合了，实现了正片叠低。注意只有一个元素div，这个div有背景图片和背景颜色。

background-blend-mode: multiply;是div属性，mix-blend-mode: multiply; 是img的属性，两个东西有差别

HTML

<div id="custom-responsive-table">
<table class="table">
<thead class="bg-light">
<tr>
<td>h1</td>
<td>h2</td>
<td>h3</td>
<td>h4</td>
</tr>
</thead>
<tbody>
<tr>
<td data-title="h1">content1</td>
<td data-title="h2">content2</a></td>
<td data-title="h3">content3</td>
<td data-title="h4">content4</td>
</tr>
<tr>
<td data-title="h1">second1</td>
<td data-title="h2">second2</td>
<td data-title="h3">second3</td>
<td data-title="h4">second4</td>
</tr>
</tbody>
</table>
</div>
<p>https://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table</p>

CSS

/*반응형 테이블*/
@media only screen and (max-width: 800px) {

/* Force table to not be like tables anymore */
#custom-responsive-table table,
#custom-responsive-table thead,
#custom-responsive-table tbody,
#custom-responsive-table th,
#custom-responsive-table td,
#custom-responsive-table tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
#custom-responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

#custom-responsive-table tr { border: 1px solid #ccc; }

#custom-responsive-table td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 20%; /*컬럼위치조정*/
white-space: normal;
text-align:left;
}

#custom-responsive-table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}

/*
Label the data
*/
#custom-responsive-table td:before { content: attr(data-title); }
}