如何用用CSS边框(border)属性设置一个播放按钮，原理是什么？

可以使用伪元素来实现播放按钮的效果。具体实现如下：

.play-btn {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #fff;
  overflow: hidden;
}

.play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 35%;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 40px solid #fff;
  transform: translate(-50%, -50%);
}

.play-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 40%;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 40px solid #333;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease-in-out;
}

.play-btn:hover::after {
  border-left-color: #fff;
}

实现原理：使用 border-radius 属性将元素变为圆形，再设置一个白色边框。接着使用伪元素 ::before 和 ::after 来分别实现三角形和矩形的形状，再用 transform 属性来使其位于圆的中心位置，并使用 border 属性设置它们的颜色和大小。最后再使用 hover 伪类选择器对 ::after 进行一个颜色过渡的效果。

当用户将鼠标悬停在播放按钮上时，播放按钮的颜色就会变亮，这是通过设置 ::after 的颜色并使用transition 属性实现的。