能否仿照VSCode为::selection选中状态添加border-radius属性？

问题解决说明 #

原生写法失效原因 #

::selection 是浏览器原生提供的选中文本伪元素，W3C标准对其可修改属性做了严格限制，仅支持修改文本色、背景色、文字装饰、文字阴影等少数样式，不支持border-radius、padding、margin等盒模型相关属性，所以你写的代码无法实现圆角效果。

可行实现方案 #

方案1：JS模拟自定义选中（兼容性最好，支持全量主流浏览器）

通过监听文本选择事件，获取选中范围后生成自定义高亮层叠加在原文本上方，可自定义任意样式包括圆角。
示例代码如下：

<!-- 页面结构 -->
<div class="content">
  这里是可以被选中的文本内容，选中后会出现带圆角的高亮效果
</div>

/* 先隐藏原生选中样式 */
.content::selection {
  background: transparent;
}
/* 自定义高亮样式 */
.custom-highlight {
  position: absolute;
  background: #264f78; /* 可替换为VSCode同款选中色 */
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

// 监听文本选择事件
document.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;
  const range = selection.getRangeAt(0);
  // 清除之前的高亮层
  document.querySelectorAll('.custom-highlight').forEach(el => el.remove());
  if (range.collapsed) return;
  // 获取选中范围的矩形坐标
  const rects = range.getClientRects();
  for (const rect of rects) {
    const highlight = document.createElement('div');
    highlight.className = 'custom-highlight';
    highlight.style.left = `${rect.left + window.scrollX}px`;
    highlight.style.top = `${rect.top + window.scrollY}px`;
    highlight.style.width = `${rect.width}px`;
    highlight.style.height = `${rect.height}px`;
    document.body.appendChild(highlight);
  }
});
// 点击空白处清除高亮
document.addEventListener('mousedown', () => {
  document.querySelectorAll('.custom-highlight').forEach(el => el.remove());
  window.getSelection().removeAllRanges();
});

方案2：CSS Custom Highlight API（新特性，兼容性需适配）

Chrome 105+、Edge 105+、Safari 17.2+版本已支持该API，相比JS模拟方案性能更好，代码更简洁：

::highlight(custom-selection) {
  background-color: #264f78;
  border-radius: 4px;
}

const selection = window.getSelection();
document.addEventListener('selectionchange', () => {
  if (CSS.highlights) {
    CSS.highlights.clear();
    const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
    if (range && !range.collapsed) {
      CSS.highlights.set('custom-selection', new Highlight(range));
    }
  }
});

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