如何应用圆角边框突出显示/选择-Howtoapplyroundedborderstohighlight/selection

5  

I can assure you this has nothing to do with html, css border radius or highlighting. The proof?

我可以向你保证，这与html，css边框半径或突出显示无关。证据？

1. The whole selection appears as a single block with multiple edges and veritices and is not symmetric. There is no way to have multiple edged shape directly in html, without using SVG or Canvas. (well, that's a possibility open for discussion)
2. 整个选择显示为具有多个边和格的单个块，并且不对称。在不使用SVG或Canvas的情况下，无法直接在html中使用多边形状。 （嗯，这是一个可以讨论的可能性）
3. If it is not a single block, but indeed multiple lines highlighted or marked with some kind of HTML or CSS or JS, then there cant be an outward facing curve like this:
   
   (there are always possibilities. For example you could cover the selection using a white rectangle with a border-radius, but this appears to be highly inefficient and unlikely... So...)
4. 如果它不是单个块，但实际上有多个行突出显示或用某种HTML或CSS或JS标记，那么就不能像这样的向外曲线:(总有可能。例如，你可以使用一个带有边界半径的白色矩形，但这看起来非常低效且不太可能......所以...）

Summary, they must be using the Canvas property and whole lot of codes to 'underlay' an interactive selection procedure. There are numerous different types of highlighting appearing in the editor, like 'same word highlighting', 'selected highlighting', 'out of focus highlighting', etc... For all these to happen efficiently, I can't find a better alternative than canvas.

总结一下，他们必须使用Canvas属性和大量代码来“衬托”交互式选择过程。编辑器中出现了许多不同类型的突出显示，例如“同一个词突出显示”，“选择突出显示”，“聚焦突出显示”等...为了使所有这些有效发生，我找不到更好的选择比帆布。

Don't be mad at me for posting this. But I didn't want to see my 4 hours of research as a waste. At least I got an observation and that's that.

发布此内容不要生我的气。但我不想把我4小时的研究视为浪费。至少我得到了一个观察，就是这样。

UPDATE :

更新：

Though I thought covering the selection using a white rectangle with a border-radius at the end, is a rather inefficient and unnecessary way. Microsoft doesn't think so.

虽然我认为在末尾使用带有边框半径的白色矩形来覆盖选区，但这是一种相当低效且不必要的方式。微软并不这么认为。

They are using the curved edged rectangles to cover up the end of highlights to give that effect. They are using absolutely positioned, round-edged

var selection = (window.getSelection() // > IE 9 
                 || document.selection.createRange() //

$(".selection").replaceWith($(".selection")[0].childNodes);