页面禁止复制效果的实现

460 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面禁止复制</title>
    <style>
        .box p:first-child {
            /* 
                user-select    设置或检索是否允许用户选中文本
                none           文本不能被选择
                text           可以选择文本
                all            当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
                element        可以选择文本,但选择范围受元素边界的约束
             */
            user-select: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>谁都有个性,谁也不是生下来就适应社会,环境像是一条河,咱都是河里的石头,一开始各有各形状,头上长角、身上生刺,天长日久被喝水冲刷,角啊,刺啊的就都磨成圆的了。</p>
        <p>每个人的青春,终逃不过一场爱情。在这里,有爱,有情,有喜,有乐,却单单没有永恒。</p>
        <p>青春是白色的,似雪似浪,如云如月,白洁无瑕。犹如一张白纸,如写的文字,爱画最新最美的图画。</p>
    </div>
</body>
</html>

参考:css3教程手册user-select