css真的有很多奇奇怪怪的技术点，一个专业的前端跟一个能做前端的后端，能最大拉开差距的技能点还得是css。最近在项目中用了一些以前没见过的css代码，在这写一下分享给大家看看。
一. 单位（dvh,dvw）
px、rem、em这些就不说了，老生常谈了。vh、vw这两个，有点经验的前端应该都会知道。 前阵子有个项目在移动端的一些浏览器里面表现有问题，一个聊天窗口的节点高度设置成90vh的，然后发现浏览器自带导航栏或者地址栏会盖在上面（说的就是你，ios的浏览器），如下图
原本我还打算用js监听innerHeight设置上去的，但是还是觉得耗性能，我认为css应该有解决方案的，就去找啊找。
幸运的是，现在有新的解决方案，dvh,dvw，动态视口的高度宽度。它可以根据移动设备的可展示范围自动变化宽高，如导航栏显示或消失后，这个宽高可以自动变化进行适配。改成用这个单位就解决问题了，除此之外，css还出了另外两套单位svw跟lvw，分别是小视口尺寸、大视口尺寸，不过具体我没测试过，应用场景暂时没找到。
二、九宫格切图（border-image）
在前端这个概念比较少，但是在客户端里面，这种做法会比较普遍。这里直接套用cocos文档的说明好了。
这种做法的目的就是为了让图片资源尽量的小，而且还能任意拉伸成不同size来达到复用的效果，目的还是为了减少资源。
游戏客户端一般都有自带的九宫格编辑功能，操作大概就如下图。这样就能任意拉伸任意部位了，而单纯background-size的属性是整体拉伸，是不能达到这样的效果的，所以前端传统的做法就是加载不同图片，即使这些图片很相近，但是如果长宽比有不一样的，就只能换图了。
那么，我们有没有能做到这样效果的代码呢？其实是有的，上图是不是有点熟悉，那就是我们的border-image-slice。
border-image其实是很久以前就有的特性了，不过一直都很少人用，而且border-image-slice不是很直观。对于border-image比较核心的代码就3个，border-image-source（图片源）、border-image-slice（图片切割）、border-image-width（边框宽度）。
border-image-source就不细说了，没啥好说的。
border-image-slice可以如上图切割，border-image-slice: 94 94 46 166 fill;数值的顺序就是css传统的顺序了，在最后面接个fill，就是中间会填充图片。
border-image-width跟上面的也差不多的写法，border-image-width: 94px 94px 46px 166px;，上述的数值可以填百分比，可以px，slice不填单位就是固定像素。
不过这个调试起来会比较麻烦，但是理论上能省很多图片，图片也能压缩到最小了。哦，这种方案还有个问题就是，对于渐变色处理的不好，四个角那边是没有拉伸的，会跟原图一样，中间拉伸，如果有径向的渐变色，是比较容易看出有问题的。
isolation: isolate;
在遇到一些按钮上面有独立的图片或者色块要相对定位的时候，如果直接写出来，会把节点内部自然排布的内容给遮挡住，用z-index:-1，又会把它自身给遮挡了，那这个时候我们可以用isolation: isolate;这个css属性。
这个属性的用途是
1. 防止混合效果
在具有透明度、阴影或其他视觉效果的元素中，使用 isolation: isolate; 可以确保这些效果不会与父元素或其他兄弟元素的内容混合。这有助于保持设计的一致性和可预测性。
2. 性能优化
创建新的合成上下文可以提高渲染性能，尤其是在复杂的布局中。浏览器可以更有效地处理和渲染这个元素及其子元素，从而提升整体性能。
3. 层叠上下文
使用 isolation: isolate; 会创建一个新的层叠上下文。这意味着在同一上下文中的元素的 z-index 只会与其他同一上下文中的元素相互影响，而不会受到外部元素的影响。这为设计师提供了更大的灵活性和控制力。
