背景
本人一直对 CSS 很感兴趣，刚好我们团队有一位擅长CSS的大佬：COCO。
于是我找到他， 建议做一期关于CSS的分享， 于是就有了《CSS创意构想》。
分享的内容很棒，里面有很多技巧， 有的很实用， 有的很华丽。 听完之后， 我觉得十分受用， 就想结合自己的一些理解，再次整理一番， 加深印象， 二次吸收， 所以就有了今天的文章。
满满的干货，也分享给大家， 希望对大家有所启发。
布局
平行四边形
先抛一个问题， 如何实现平行四边形布局效果?
transform？叠加三角形？
仅仅实现形状的话， 上面两种方式都是可以的。
但是， 如果图形内部还有文字，需要正常排布，transform 、叠加三角形 都不可行。
那怎么办呢？ 答案就是： shape-outside.
- shape-outside定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行排版
- clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域
clip-path 语法：
{ clip-path: circle(50px at 0 100px); clip-path: ellipse(); clip-path: inset(10px 10px 10px 10px); clip-path: polygon(10px 10px, 20px 20px, 30px 30px);}图文混排 Demo:
https://codepen.io/Chokcoco/p...
CSS Shapes Demo：
https://codepen.io/Chokcoco/p...
一个适用的场景： 适配 iPhone X刘海头
镂空
使用阴影，可以非常简单的模拟遮罩效果， 并且，圆角也是没有问题的。
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);垂直居中
抛出个问题： 最快的水平垂直居中方法是什么？
你首先想到的是不是： flex, center, center ?
其实margin也可以：
<div class="g-container"> <div class="g-box"></div> </div>.g-container { display: flex; } .g-box { margin: auto; }原理：
在 flex 格式化上下文中，设置了 margin: auto 的元素，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去。
Live Demo:
https://codepen.io/Chokcoco/p...
还有这种常见的左右布局， 也可以巧用margin来实现：
<ul class="g-nav"> <li>导航A</li> <li>导航B</li> <li>导航C</li> <li>导航D</li> <li class="g-login">登陆</li> <li>注册</li></ul>.g-nav { display: flex; } .g-login { margin-left: auto; }自动页脚
我们经常会遇到需要放置在页脚的元素， 高度超过一屏时， 自动顶下去：
这种效果也有很多种实现方式， 巧用margin可以快速实现：
<div class="g-container"> <div class="g-real-box"> ... </div> <div class="g-footer"></div></div>.g-container { height: 100vh; display: flex; flex-direction: column;}.g-footer { margin-top: auto; flex-shrink: 0; height: 30px; background: deeppink;}// 楼主等下有事出门， 先发一部分。