如何应用圆角边框来突出显示/选择

我用过视觉工作室在线 http://visualstudio.com对于一个项目来说有一段时间，他们将圆形边框应用于在线代码查看器中的选择的方式非常有趣：

我尝试检查该元素并寻找某种自定义 CSS，但没有成功。

我有一种感觉，这需要一些复杂的“技巧”才能使其发挥作用，但这似乎很有趣，因为我以前从未见过它这样做。

他们如何能够将圆角边框应用于选区？

Note:选择时，正常选择是完全隐藏的，圆形选择就像常规选择一样跟随光标。不是在你选择了一些东西之后。

Edit: I have 创建了一个叉子 http://jsfiddle.net/c6p7dybg/1/@Coma 的答案应该在 Firefox 中工作，并在鼠标移动时选择：

$(document).on('mousemove', function () {

（在某些情况下，边界仍然可以使用。）

并不完美，但它正在工作：

http://jsfiddle.net/coma/9p2CT/ 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());
});

谢谢Tim Down https://stackoverflow.com/users/96100/tim-down for Rangy https://github.com/timdown/rangy!