背景

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

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

阴影

渐变

混合模式

滤镜

伪元素

波浪效果

滚动指示器

滚动视差