如何将圆角边框应用于突出显示/选择
我在一个项目中使用Visual Studio Online已经有一段时间了，他们在其在线代码查看器中将圆角边框应用于所选内容的方式非常有趣：
我试着检查元素并寻找某种自定义的CSS，但是没有成功。
我有一种感觉，这需要一些复杂的“hack”来使它工作，但它似乎非常有趣，因为我以前从未见过它。
如何将圆角边框应用于所选内容？
注意：正常选择在选择时完全隐藏，四舍五入的选择就像常规选择一样跟随光标。不是在你选择了一些东西之后。
编辑：我有@Coma的答案的created a fork，应该可以在火狐中工作，并在鼠标移动时选择，使用：
$(document).on('mousemove', function () {(在某些情况下，边框仍然可以使用工作。)
回答 5
Stack Overflow用户
发布于 2014-08-04 07:30:45
不是完美的，但它是有效的：
http://jsfiddle.net/coma/9p2CT/
删除实际选择
::selection {
background-color: transparent;
}添加一些样式
span.highlight {
background: #ADD6FF;
}
span.begin {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
span.end {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
pre.merge-end > span:last-child {
border-bottom-right-radius: 0;
}
pre.merge-end + pre > span:last-child {
border-top-right-radius: 0;
}
pre.merge-begin > span:first-child {
border-bottom-left-radius: 0;
}
pre.merge-begin + pre > span:first-child {
border-top-left-radius: 0;
}对节点元素中的每个字符进行换行
var format = function () {
var before = -1;
var html = $.trim(editor.text())
.split("\n")
.reverse()
.map(function (line) {
var a = line.length === before ? 'merge-end' : '';
before = line.length;
return '<pre class="' + a + '"><span>' + line.split('').join('</span><span>') + '</span></pre>';
})
.reverse()
.join('');
editor.html(html);
};获取选定的节点并突出显示它们，照顾它们的父节点
var getSelectedNodes = function () {
var i;
var nodes = [];
var selection = rangy.getSelection();
for (i = 0; i < selection.rangeCount; ++i) {
selection
.getRangeAt(i)
.getNodes()
.forEach(function (node) {
if ($(node).is('span')) {
nodes.push(node);
}
});
}
return nodes;
};
var highlight = function (nodes, beforeNode) {
var currentNode = $(nodes.shift()).addClass('highlight');
var currentParent = currentNode.parent();
if (beforeNode) {
var beforeParent = beforeNode.parent();
if (currentParent.get(0) !== beforeParent.get(0)) {
currentNode.addClass('begin');
beforeNode.addClass('end');
beforeParent.addClass('merge-begin');
}
} else {
currentNode.addClass('begin');
}
if (nodes.length) {
highlight(nodes, currentNode);
} else {
currentNode.addClass('end');
}
};
format();
$(document).on('mouseup', function () {
$('.highlight').removeClass('highlight begin end');
highlight(getSelectedNodes());
});Stack Overflow用户
发布于 2014-08-03 22:10:55
我可以向你保证，这与html，css边框半径或高亮显示无关。证据是什么？
- 整个选择显示为具有多个边和顶点的单个块，并且不对称。在不使用SVG或Canvas的情况下，无法在html中直接创建多个边缘形状。(好的，这是一个可以讨论的可能性)
- 如果它不是一个单独的块，但确实有多行突出显示或标记了某种超文本标记语言、CSS或JS，那么就不可能有像这样的面向外的曲线：
(总是有可能的。例如，您可以使用带有边框半径的白色矩形来覆盖选定内容，但这似乎非常低效且不太可能……所以...)
总而言之，他们必须使用画布属性和整个代码来‘基础’交互式选择过程。编辑器中有许多不同类型的突出显示，如“相同的单词突出显示”、“选定的突出显示”、“焦点外突出显示”等。为了让所有这些都高效地发生，我找不到比canvas更好的替代方案。
别因为我发了这篇文章而生我的气。但我不想看到我的4个小时的研究是浪费。至少我得到了一个观察结果，仅此而已。
更新:
虽然我认为用一个白色矩形来覆盖选区是一种相当低效和不必要的方式。微软不这么认为。
他们正在使用弯曲的边缘矩形来掩盖高光的末端，以提供这种效果。他们使用绝对定位，圆边的<div>来提供突出显示的效果。在<div>的末尾，它们覆盖了一个圆角矩形的图像。
称赞他们，他们在这方面做得很好。
Stack Overflow用户
发布于 2014-08-04 00:58:17
它们实际上使用圆边矩形来覆盖句子中比前面或后面的行更小的高亮部分的结尾(就像我在第二点中所说的那样)。你自己看看这个：
- 不能直接从iframe检查元素。因此，单击其他位置并导航到iframe。我是用chromes内置的源代码来做的，使用这张图片来找出图片中突出显示的线条的位置。
- inspector.
- Then
<div>包含了所有的“选择”高亮。！！** - the next
<div>有类似的背景色<div>s，只是它们用于突出显示聚焦的单词、相似的单词等...
这实际上是iframe的内容。看到顶部的#document了吗？
查看展开的视图。上面有代码的一小块地方实际上是突出显示的部分。
然而，对于一个简单的网站来说，这不是一个很好的主意。他们真的需要解析和填充单词和字母，因为它应该是一个高端的代码编辑器，所以不能责怪他们花了相对较少的时间来“圆化”一些边缘。
https://stackoverflow.com/questions/24985529
复制相似问题