嘿，我来帮你搞定这个从单角开始绘制完整边框的动画效果！直接给border属性加动画没法实现这种逐段绘制的效果，我给你准备了适配矩形、正方形和圆形的完整解决方案，代码直接就能用：

一、矩形与正方形的实现（纯CSS无额外元素） #

我们可以利用CSS多背景渐变配合动画，通过逐段修改背景的尺寸来模拟边框绘制的过程：

.rectangle{
  width:50px;
  height:25px;
  /* 用四条线性渐变模拟四条边框，初始状态只有起点的1px */
  background: 
    linear-gradient(to right, #333 0%, #333 100%) top left / 0% 1px no-repeat,
    linear-gradient(to bottom, #333 0%, #333 100%) top right / 1px 0% no-repeat,
    linear-gradient(to left, #333 0%, #333 100%) bottom right / 0% 1px no-repeat,
    linear-gradient(to top, #333 0%, #333 100%) bottom left / 1px 0% no-repeat;
  animation: drawRectBorder 2s linear forwards;
}

.square{
  width:40px;
  height:40px;
  background: 
    linear-gradient(to right, #333 0%, #333 100%) top left / 0% 1px no-repeat,
    linear-gradient(to bottom, #333 0%, #333 100%) top right / 1px 0% no-repeat,
    linear-gradient(to left, #333 0%, #333 100%) bottom right / 0% 1px no-repeat,
    linear-gradient(to top, #333 0%, #333 100%) bottom left / 1px 0% no-repeat;
  animation: drawRectBorder 2s linear forwards;
}

.marg-T{
  margin-top:10px;
}

/* 矩形/正方形的边框绘制动画，分四阶段完成四条边的绘制 */
@keyframes drawRectBorder {
  25% {
    /* 完成上边绘制 */
    background: 
      linear-gradient(to right, #333 0%, #333 100%) top left / 100% 1px no-repeat,
      linear-gradient(to bottom, #333 0%, #333 100%) top right / 1px 0% no-repeat,
      linear-gradient(to left, #333 0%, #333 100%) bottom right / 0% 1px no-repeat,
      linear-gradient(to top, #333 0%, #333 100%) bottom left / 1px 0% no-repeat;
  }
  50% {
    /* 完成上边+右边绘制 */
    background: 
      linear-gradient(to right, #333 0%, #333 100%) top left / 100% 1px no-repeat,
      linear-gradient(to bottom, #333 0%, #333 100%) top right / 1px 100% no-repeat,
      linear-gradient(to left, #333 0%, #333 100%) bottom right / 0% 1px no-repeat,
      linear-gradient(to top, #333 0%, #333 100%) bottom left / 1px 0% no-repeat;
  }
  75% {
    /* 完成上边+右边+下边绘制 */
    background: 
      linear-gradient(to right, #333 0%, #333 100%) top left / 100% 1px no-repeat,
      linear-gradient(to bottom, #333 0%, #333 100%) top right / 1px 100% no-repeat,
      linear-gradient(to left, #333 0%, #333 100%) bottom right / 100% 1px no-repeat,
      linear-gradient(to top, #333 0%, #333 100%) bottom left / 1px 0% no-repeat;
  }
  100% {
    /* 完成全部四条边绘制 */
    background: 
      linear-gradient(to right, #333 0%, #333 100%) top left / 100% 1px no-repeat,
      linear-gradient(to bottom, #333 0%, #333 100%) top right / 1px 100% no-repeat,
      linear-gradient(to left, #333 0%, #333 100%) bottom right / 100% 1px no-repeat,
      linear-gradient(to top, #333 0%, #333 100%) bottom left / 1px 100% no-repeat;
  }
}

二、圆形的实现（SVG+CSS动画） #

圆形的边框绘制用SVG会更精准，利用stroke-dasharray和stroke-dashoffset属性可以轻松实现从一点开始绘制完整圆的效果：

.circle-svg {
  width:50px;
  height:50px;
}

.circle-svg circle {
  stroke: #333;
  stroke-width: 1;
  fill: none;
  /* 圆的周长：2 * π * 半径(24) ≈ 150.8 */
  stroke-dasharray: 150.8;
  stroke-dashoffset: 150.8;
  animation: drawCircleBorder 2s linear forwards;
}

@keyframes drawCircleBorder {
  to {
    stroke-dashoffset: 0;
  }
}

对应的HTML结构：

<div class="rectangle"></div>
<svg class="circle-svg marg-T" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="24" />
</svg>
<div class="square marg-T"></div>

关键说明 #

• 矩形/正方形的动画分四个阶段，每个阶段完成一条边的绘制，你可以调整animation-duration来控制整体动画速度。
• 圆形的stroke-dasharray值等于圆的周长，初始stroke-dashoffset设为周长，动画时逐渐偏移到0，就实现了完整的绘制效果。
• 如果想要调整动画的起始角，只需要修改矩形背景渐变的起始位置，或者给SVG的circle添加transform: rotate(XXdeg)即可。

内容的提问来源于stack exchange，提问作者Ahmad