背景

本人一直对 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;
}

// 楼主等下有事出门，先发一部分。

阴影

渐变

混合模式

滤镜

伪元素

波浪效果

滚动指示器

滚动视差