如何复刻《英雄联盟》官网Play For Free按钮的切角边框效果

你禁用大部分CSS后边框仍然存在，是因为该效果的样式是绑定在元素的内联样式或者CSS变量上的，禁用外部样式表时未覆盖内联规则所以保留了效果，本质还是纯CSS实现，没有使用图片、SVG等额外资源。
官方的实现逻辑是用clip-path属性切割矩形边角，再通过两层切割后的矩形错位叠加露出边框效果，边框层和内容层多使用伪元素实现，所以你审查元素时需要查看按钮的::before/::after伪元素样式就能找到对应配置。

提供两种可直接复用的实现方式，不需要额外引入资源，参数可自由调整：

双元素实现（和官方逻辑一致） #

HTML代码 #

<button class="lol-btn">
  <span class="lol-btn-inner">Play For Free</span>
</button>

CSS代码 #

/* 外层作为边框层 */
.lol-btn {
  --border-width: 2px; /* 边框粗细 */
  --corner-size: 8px; /* 切角大小 */
  --border-color: #0bc6e3; /* 边框色 */
  --btn-bg: #0a1428; /* 按钮背景色 */
  --text-color: #f0e6d2; /* 文字颜色 */
  border: none;
  padding: 0;
  background: var(--border-color);
  /* 切割四个边角 */
  clip-path: polygon(
    0 var(--corner-size),
    var(--corner-size) 0,
    calc(100% - var(--corner-size)) 0,
    100% var(--corner-size),
    100% calc(100% - var(--corner-size)),
    calc(100% - var(--corner-size)) 100%,
    var(--corner-size) 100%,
    0 calc(100% - var(--corner-size))
  );
  cursor: pointer;
}

/* 内层作为内容层 */
.lol-btn-inner {
  display: block;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
  background: var(--btn-bg);
  /* 和外层保持相同的切角规则 */
  clip-path: polygon(
    0 var(--corner-size),
    var(--corner-size) 0,
    calc(100% - var(--corner-size)) 0,
    100% var(--corner-size),
    100% calc(100% - var(--corner-size)),
    calc(100% - var(--corner-size)) 100%,
    var(--corner-size) 100%,
    0 calc(100% - var(--corner-size))
  );
  /* 留出边框位置 */
  margin: var(--border-width);
}

单元素实现（代码更简洁） #

只需要一个button元素即可实现：

.lol-btn {
  --border-width: 2px;
  --corner-size: 8px;
  --border-color: #0bc6e3;
  --btn-bg: #0a1428;
  --text-color: #f0e6d2;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
  /* 双层背景叠加实现边框效果 */
  background: 
    linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
    linear-gradient(var(--border-color), var(--border-color)) border-box;
  clip-path: polygon(
    0 var(--corner-size),
    var(--corner-size) 0,
    calc(100% - var(--corner-size)) 0,
    100% var(--corner-size),
    100% calc(100% - var(--corner-size)),
    calc(100% - var(--corner-size)) 100%,
    var(--corner-size) 100%,
    0 calc(100% - var(--corner-size))
  );
  border: var(--border-width) solid transparent;
  cursor: pointer;
}

调整对应的CSS变量即可修改边框粗细、切角大小、配色等属性，完全匹配官方的静态效果。

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