如何使用CSS实现边角加粗、悬停显示边框的按钮效果

安全阿岳

2026-8-26

悬停显边角加粗边框按钮实现

核心要求

正常（normal）状态：按钮仅显示纯文本，无边框效果
悬停（hover）状态：显示定制边框，边框中间线段宽度为1px，四个边角的加粗线段宽度为3px

原有代码问题修正

原有写法存在两个核心偏差：

未做状态区分，默认加载全部边框样式，不符合正常状态纯文本展示的要求
角部线段宽度设为2px，且细边线铺满整个边长，会和角部粗线重叠，无法做出边角分段的视觉效果

完整实现代码

<div class="box">按钮文本</div>

.box {
  display: inline-block;
  padding: 12px 24px;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  background: transparent;
  background-repeat: no-repeat;
  transition: 0.2s ease;
}

.box:hover {
  background:
    /* 四个3px粗的角部线段 */
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom right,
    linear-gradient(#fff,#fff) bottom right,
    /* 四条1px细的中间线段 */
    linear-gradient(orange, orange) top,
    linear-gradient(orange, orange) bottom,
    linear-gradient(orange, orange) left,
    linear-gradient(orange, orange) right;
  /* 分别设置每个渐变的尺寸 */
  background-size:
    15px 3px, 3px 15px,
    15px 3px, 3px 15px,
    15px 3px, 3px 15px,
    15px 3px, 3px 15px,
    calc(100% - 30px) 1px,
    calc(100% - 30px) 1px,
    1px calc(100% - 30px),
    1px calc(100% - 30px);
  /* 分别设置每个渐变的位置，避免线段重叠 */
  background-position:
    0 0, 0 0,
    100% 0, 100% 0,
    0 100%, 0 100%,
    100% 100%, 100% 100%,
    15px 1px,
    calc(100% - 15px) calc(100% - 1px),
    1px 15px,
    calc(100% - 1px) calc(100% - 15px);
}

body {
  background: #222;
  padding: 100px;
}