如何在JavaFX WebView/WebKit中实现带透明度的双线边框？

可行性说明 #

可行，但原生border-style: double结合透明色在你使用的WebKit版本（JavaFX 23内置的WebKit 617.1）中存在渲染bug，导致显示异常。可以通过模拟双线边框的方式绕过这个问题。

实现方法 #

方法1：使用伪元素模拟

通过两个伪元素分别绘制两条带透明度的线条，精确控制间距和样式：

/* 目标元素设置相对定位 */
.border-target {
  position: relative;
  padding-bottom: 8px; /* 避免内容覆盖边框，可根据需求调整 */
}

/* 第一条底线 */
.border-target::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: rgba(255, 0, 0, 0.4);
}

/* 第二条底线，与第一条保持间距 */
.border-target::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px; /* 调整这个值改变两条线的间距 */
  height: 2px;
  background-color: rgba(255, 0, 0, 0.4);
}

方法2：使用渐变背景模拟

用线性渐变直接绘制两条透明线条，无需伪元素：

.border-target {
  border-bottom: none; /* 去掉原生边框 */
  /* 两层渐变分别对应两条线 */
  background-image: 
    linear-gradient(rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.4)),
    linear-gradient(rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.4));
  background-size: 100% 2px; /* 每条线的高度 */
  background-position: bottom 0 left 0, bottom 4px left 0; /* 两条线的位置 */
  background-repeat: no-repeat;
  padding-bottom: 6px; /* 调整内边距避免内容覆盖 */
}

问题原因 #

你遇到的异常是因为WebKit在渲染带透明度的double边框时，中间间隙的颜色处理逻辑存在bug——原本应该用元素背景色填充的间隙，在边框透明时会出现透明度叠加错误，导致边框显示不符合预期。而模拟双线的方式完全避开了原生double边框的渲染逻辑，因此可以正常显示透明效果。

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