深藏的5个你可能不知道的CSS属性

如果你想从CSS中创建简单的形状到相当复杂的形状，那么clip-path属性是很方便的。 使用它，您可以隐藏元素的特定区域。 最常见的用例是对于图像使用这个属性，你可以通过“clip-path”仅显示一部分内容，从而创造出比原图更有创意的图片。

clip-path: <clip-source> | [ <basic-shape> | <geometry-box> ] | none

这些值的含义:

• clip-source: 引用内部或外部SVG元素的URL
• basic-shape: 基础形状函数， 定义在 CSS Shapes specification
• geometry-box: 如果明确与“组合，它将为基本形状提供参考框。
• none: 没有剪贴

每个基本形状都有不同的参数。列出全部的参数很无聊。下面是两个应用了这个属性的两个示例图片：

除了Microsoft的浏览器（Edge和IE）之外，所有主流浏览器都支持clip-path。此外，您应该记住支持此属性的浏览器的一些注意事项。 第一个是Safari支持带有-webkit-‘前缀的属性。 第二个是所有实现了这个功能的浏览器只有部分的支持。 “部分支持”的含义因浏览器而异。 如果您想了解更多信息，请查看 相关属性的支持。

如果想试用 clip-path，我推荐你用Chrome，因为它支持最多。

另外，如果你想用一个工具在线查看这些属性如何起作用, 你可以查看 clippy.

5. will-change

我们都知道速度和性能是至关重要的，特别是在移动设备上。与台式机相比，它们有限的RAM和GPU存储器使得一些CSS操作更难以执行（在页面加载速度或图形影响方面）。如果浏览器可以在发生之前知道会发生什么，是不是这样会增加页面的响应性？

有一种方法我们可以给我们的浏览器一些重要的暗示，通过使用will-change属性，提前通知元素将会发生什么改变。因为这个属性，浏览器将在元素被改变之前有时间完成其优化工作，相应地分配内存。

听起来很酷，对吧？好消息是，Chrome 53+，Opera 43+，Firefox 52+，Safari 10和Android目前支持此属性。 （IE和Microsoft Edge不支持😂）。慢着，在继续之前，您应该注意一些事情：

您不应该将此属性应用于太多元素即使您的页面运行良好。它会减慢运行速度并消耗大量的资源和内存，这很不友好。

您应该在更改发生之前和之后使用脚本代码切换开启will-change。

这个属性不应该用来预测和解决潜在的性能问题。在出现问题后，它必须被视为最后的手段。

will-change属性可以用来避免我们多年来一直在使用的hack：使用translateZ()（或translate3d()）来推动浏览器动画并转换成硬件加速。

will-change支持四个值：

• auto：浏览器不会设置任何特殊的优化。 这与没有指定属性一样具有相同的效果。
• scroll-position表示，顾名思义，您希望在不久的将来随时更改元素的滚动位置。 一些位于在可滚动的元素中的内容需要未来在滚动视窗内可见的时候，该值可用于提示浏览器准备渲染内容。
• contents：指定要更改元素的内容。