阿里巴巴前端面试流程，你不知道的 CSS 技巧(1)，前端框架体系架构的知识

bottom: 0;

margin: auto;

}

有的时候我们不确定width,height，我们就会使用transform 来实现居中

.test3-center{

position: absolute;

left: 50%;

top: 50%;

background: red;

transform: translate(-50%, -50%);

}

这个时候我们如果需要给 test3-center 添加一个位移动画

@keyframes move{

from { transform:translateY(5px);}

to { transform:translateY(0); }

}

这个时候我们的transform就会受到位移动画干扰。

更好的方法是使用我们的 fit-content,这样就有了确定的宽高，居中可以生效了。

.test3-center{

position: absolute;

width:fit-content;

height:fit-content;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

animation: move .2s;

}

border-image

---

border-image 属性作用过程分为两个点：

1. 源图像的划分（九宫格）

2. 九宫格尺寸的控制

border-image 成员组成：

• border-im