我已经使用了
Visual Studio Online一段时间的项目，他们在他们的在线代码查看器中选择圆形边框的方式非常有趣：
我已经尝试检查元素并寻找某种自定义CSS，但没有运气。
我有一种感觉，这需要一些复杂的“黑客”使其工作，但似乎非常有趣，因为我从来没有看过它。
他们如何能够将圆形边框应用于选择？
注意：正常选择完全隐藏在WHILE选择中，舍入选择就像常规选择一样跟随您的光标。没有选择任何东西后。
编辑：我有created a fork的@ Coma的答案应该在Firefox中工作，并选择鼠标如果移动使用：
$(document).on('mousemove',function () {
(某些情况下的边界仍然可以使用工作。)
解决方法
不完美，但它的工作：
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());
});
