More than code
Thoughts, stories and ideas

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

赞(3) 打赏
转载请注明作者及连接:木子朗 » CSS Tip 系列(三)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

React CLI - 快速创建react项目脚手架工具

官 网GitHub

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏