css 中 inset 属性以及简单实现 spinner

0背景

水文，记录下 css 属性而已。

1inset 属性

inset 是 CSS 中的一个简写属性，用于同时设置元素的 top、right、bottom、left 四个定位属性。它的设计目的是简化定位相关的样式声明，尤其适合需要同时调整元素四个方向位置的场景。

1.1 基本语法

inset 可以接受 1~4 个值，遵循与 margin、padding 类似的简写规则：

/* 1个值：同时应用于 top/right/bottom/left */
inset: <value>;

/* 2个值：第1个值对应 top/bottom，第2个值对应 right/left */
inset: <value1> <value2>;

/* 3个值：第1个值对应 top，第2个值对应 right/left，第3个值对应 bottom */
inset: <value1> <value2> <value3>;

/* 4个值：分别对应 top、right、bottom、left（顺时针顺序） */
inset: <value1> <value2> <value3> <value4>;

1.2 取值类型

• 长度单位：px、em、rem、% 等（例如 inset: 10px 20%）；
• 关键字：auto（默认值，由浏览器自动计算）；
• 其他：calc() 计算值（例如 inset: calc(50% - 100px)）。

1.3 与单独属性的对应关系

inset 的简写方式完全等价于分别设置四个方向的属性，例如：

/* 简写形式 */
inset: 10px 20px 30px 40px;

/* 等价于单独声明 */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;

再举几个例子：

• inset: 0; → top:0; right:0; bottom:0; left:0;（最常用场景）；
• inset: 10px auto; → top:10px; bottom:10px; right:auto; left:auto;；
• inset: 0 20%; → top:0; bottom:0; right:20%; left:20%。

2使用场景

inset 通常与 position 属性 fixed/absolute 配合使用，根据不同的定位方式产生不同效果。

2.1 position: absolute

元素相对于最近的"已定位祖先"（position 不为 static 的祖先）定位，inset 控制元素与祖先的边距。

例：让元素填充整个定位容器（常用作全屏遮罩或背景层）：

.overlay {
  position: absolute;
  inset: 0; /* 完全覆盖父容器 */
  background: rgba(0,0,0,0.5);
}

2.2 position: fixed

元素相对于视口（浏览器窗口）定位，inset 控制元素与视口的边距。

例：固定在页面顶部的导航栏，宽度占满屏幕：

.navbar {
  position: fixed;
  inset: 0 0 auto 0; /* top:0; right:0; bottom:auto; left:0; */
  height: 60px;
}

以下 fixed 定位可以实现撑开父元素，原先我们需要设置 width:100% height:100% 的，现在直接 inset: 0 即可撑开父元素：

.loading {
  position: fixed;
  inset: 0;
  background: red;
}

3简单实现 spinner

我们借助 border、border-top 和 border-radius 可以简化的实现 spinner 效果，代码如下：

.spinner {
  width: 100px;
  height: 100px;
  border: 5px solid gray;
  border-left: 5px solid red;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}