::selection不支持border是因为css规范未允许该属性作用于选中文本，仅color、background-color、text-shadow和cursor有效；替代方案是js监听selectionchange并动态包裹选中内容。
为什么::selection加边框总没效果
因为浏览器默认不支持给选中文本加border——不是你写错了，是CSS规范压根没允许这个属性作用于::selection。你能用的只有color、background-color、text-shadow和cursor这几个。试图写border: 2px solid red会直接被忽略，控制台也不会报错，所以特别容易卡在“明明写了却看不见”。
::selection能用的样式有哪些
实际生效的属性非常有限，且各浏览器支持程度不同：
-
color：文字颜色（所有浏览器都支持） -
background-color：背景色（支持度最好） -
text-shadow：可模拟“发光边框”效果，比如text-shadow: 0 0 2px #000, 0 0 2px #000 -
cursor：仅在部分浏览器中影响选中时的光标形态 -
font-weight等字体相关属性——多数无效，别试
想实现“视觉边框感”，有什么替代方案
真要突出选中区域，得绕开::selection本身，用JS+CSS组合：
- 监听
selectionchange事件，用window.getSelection()拿到当前选中范围 - 把选中文本包裹进一个
<span></span>，加上自定义class（比如selected-highlight） - 该class里可以自由使用
border、outline、box-shadow等 - 注意清理旧的包裹节点，否则DOM会越来越臃肿
- 移动端兼容性差，
getSelection()在iOS Safari中对input/textarea内选中支持不稳定
Chrome/Firefox/Safari的::selection差异
连基础行为都不统一：
- Chrome和Edge：支持
::selection，但只认::selection，不支持::-webkit-selection这种前缀写法（已废弃） - Firefox：必须写
::selection，不支持-moz-前缀 - Safari：从15.4开始才真正支持
::selection，更早版本完全无效；且text-shadow在Safari中渲染偏弱 - 所有浏览器都不支持在
<input>或<textarea></textarea>里用::selection定制样式——那是表单控件的内部渲染逻辑，CSS插不进去
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
