选中文本的圆角框如何制作

p::selection{
            border: 3px solid blue;
            border-radius: 80%;
            background-color: rgb(224, 43, 19);
        }

这种选中文本的圆角框是怎么做的，选中的情况下设置border-radius没有效果，颜色修改有效果

源自：CSS3选择器 3-32 伪元素

收起

1回答

好帮手慕慕子 2022-03-07 10:04:29

同学你好，不是很清楚同学在哪里看到的这个效果呢，可以详细描述下，另外，一般选中文本后更多的是修改文字和背景颜色。可以查看下MDN中对于::section选择器的介绍，只有一小部分css属性适用于该选择器，如下：

其中并不包括border等边框属性，所以粘贴的代码中，设置边框样式没有生效。

祝学习愉快~

提问者从此在回忆里 #1

这个效果是在力扣的代码框里看到的，它选中文本之后就是有圆角的，想知道这是怎么实现的，昨天试过之后没成功

2022-03-07 10:10:26
好帮手慕慕子回复提问者从此在回忆里 #2

同学你好，通过css无法实现该效果，截图中的效果是编辑器自带的默认样式，vscode编辑器选中也会有这个效果，如下：
祝学习愉快~

2022-03-07 13:54:16
提问者从此在回忆里回复好帮手慕慕子 #3

好的，谢谢解答

2022-03-07 14:09:21