前言
我是在搞 1 side box-shadow 发现这个功能的. 平常很少做特效, 所以对这个好功能缺乏认识.
这篇大概记入一下先, 以后有认真用再补上细节.
参考
Youtube – Awesome UI Interactions with the CSS Clip Path Property
Stack Overflow – How can I add a box-shadow on one side of an element?
The Awesome CSS Clip-path Property
Youtube – How to make shapes with CSS
介绍
它最要的功能就是把一个 div clip 出各种形状. 配上 animation 就可以做出变 "形状" 效果了.
比如把一个正方形, 变成圆形, 六角形, 什么形都可以.
画圆形
<div class="container"> <div class="box1"></div> <div class="box2"></div> </div>
通常画圆形, 我们会用 border-radius, 但用 clip-path 会更直观哦
.container { .box1 { width: 100px; height: 100px; background-color: pink; border-radius: 50%; } .box2 { margin-top: 1rem; width: 100px; height: 100px; background-color: lightblue; clip-path: circle(50%); } }
效果是一模一样的
clip-path 还有更厉害的地方是它可以控制 position
.container { border: 1px solid red; .box1 { width: 400px; height: 200px; background-color: pink; clip-path: circle(30px at 100px 100px); } }
效果
不一定要用 px, 用 percentage 也可以 (但我不清楚它的具体算法. 它的 percentage 不是 depend on width 的)
画各种形状
之前写 CSS – border-radius (Rounded Corners) 有介绍过画各种形状. 但是它并不是真的什么形状都画的出来. 很 limitation 的.
而 clip path 就很强大. 几乎啥形状都可以画, 可以用这个工具玩玩看 CSS clip-path maker
常用的是 circle (圆形), ellipse (椭圆形), polygon (多角形, 如上图)
1 side box shadow
一样是用 box-shadow 来做影子, 只是用了 clip 把不想要的 3 边影子 clip 掉. 这里的关键是 inset
inset 的用法是这样的
clip-path: inset(20px 20px 50px 20px);
效果
有点像 padding. top right bottom left 往内 clip.
回到 box-shadow 的例子. inset(0, -15px 0 0)
如果是 4 个 0, 那么所有 shadow 都看不见.
right 15px 是往内 clip, 反过来 right -15px 是往外. 所以反而 right shadow 就出现了. 很巧妙的技巧.
但也可以看出不是正规做法. 但是比起 spread 这招还是比较好使的.