HTML如何给按钮配置渐变色描边？背景剪裁边框攻略-html教程-PHP中文网

直接用border-color写linear-gradient()无效，因该属性仅接受颜色值；渐变边框需通过border-image（配slice:1、solid边框）、background+clip-path（inset裁剪）或伪元素::before叠加等方案模拟。

html如何给按钮配置渐变色描边？背景剪裁边框攻略

直接用 border-color 写 linear-gradient() 不行——它只接受颜色值，不接受图像。所谓“渐变描边”，本质是绕过 border 属性本身，用其他 CSS 机制模拟出边框区域的渐变视觉效果。

为什么 `border-image` 很容易失效？

常见错误是只写 border-image: linear-gradient(to right, red, blue);，没配 border-image-slice。浏览器会直接忽略整条声明。

border-image-source 确实能接 linear-gradient()，但必须搭配 border-image-slice: 1（不是 100%）才生效
border 必须显式设 style 和 width，比如 border: 3px solid transparent；none 或 hidden 会让 border-image 彻底失效
Chrome 110+、Firefox 115+ 支持，Safari 17.4 仍不支持——线上项目慎用
加 border-radius 后，四角常出现断裂或纯色块，因为 border-image 和圆角坐标系统不兼容

`background` + `clip-path` 模拟描边怎么写？

这是目前兼容性好、代码轻量、且能保留圆角完整性的主流方案。核心思路：把渐变铺满整个按钮，再用 clip-path: inset() 把中间内容“挖掉”，外露一圈就是渐变边框。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

clip-path: inset(2px) 表示向内裁剪 2px，留出的外围就是 2px 宽的“边框”
background-size 建议设为 200% 200%，避免小按钮上色标重复太密
必须给按钮设 padding，否则文字可能被 clip-path 切掉
不支持 clip-path 的旧浏览器（如 IE）会降级为纯色背景，无边框——需配合 background-color fallback

.grad-border-btn {
  background: linear-gradient(90deg, #3498db, #2ecc71);
  background-size: 200% 200%;
  clip-path: inset(3px); /* 边框粗细 = inset 值 */
  padding: 12px 24px;
  color: white;
  border: none;
  border-radius: 8px;
}