CSS Tip 系列（三）

1. 响应式多列布局

https://codepen.io/kevinpowell/pen/zYxogZy

.content {
  columns: 200px;
}

2. 使用 box-shadow 实现多边框叠加效果

https://codepen.io/kevinpowell/pen/rNaOOXM

<div class="content">
  <p>Lorem ipsum dolor ... Velit, pariatur placeat!</p>
</div>

<style>
.content {
  box-shadow:
    0 0 0 10px #EE6352,
    0 0 0 20px #D45379,
    0 0 0 30px #A4558F,
    0 0 0 40px #6D588E,
    0 0 0 50px #405378;
}
</style>

3. Flexbox 的 margin auto 布局

https://codepen.io/kevinpowell/pen/QWwNogO

<div class="content">
  <div class="box left">left</div>
  <div class="box right">right</div>
</div>

<style>
.content {  display: flex; }
.left { margin: 0 auto; }
.right { margin-left: auto; }
</style>

.left 左右 margin auto 了，.right 只有左边的 margin auto 了。相当于：把当前剩余水平空间平均分成了 3 份，分别分到了 .left 的两边和 .right 的左边。

4. background-repeat: space

https://codepen.io/kevinpowell/pen/oNgZPVK

.content {
  background-repeat: space no-repeat;
  /* 等同于
    background-repeat-x: space;
    background-repeat-y: no-repeat;
  */
}

5. 在 Flex 容器中如何垂直居中

https://codepen.io/kevinpowell/pen/povpeoK

<div class="content parent">
    <p class="child">Hello!</p>
</div>

<style>
.content {
  display: flex; /* 或是 grid */
}
.child {
  margin-top: auto;
  margin-bottom: auto
}
</style>

6. 相关链接

https://codepen.io/collection/nJzQBY
https://twitter.com/hashtag/CSSTipOfTheDay?src=hashtag_click&f=live