CSS禁止複製：從多個方面探討如何實現

一、CSS禁止複製文字

有時候我們不希望頁面上的一些文字被用戶複製，那麼可以使用CSS來禁止文字的複製。需要注意的是，這並不能完全阻止用戶複製，但可以阻止大部分用戶非常簡單地複製文本。

可以使用以下代碼來實現：

    
        body{
            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -khtml-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
    

這個方法是通過將所有選取元素的CSS樣式設置為「none」來實現的。這樣用戶就無法複製頁面上的文字了。但是需要注意的是，這個方法無法阻止用戶通過查看網頁源代碼來訪問這段文字。

二、複製CSS什麼意思

在一些情況下，我們希望用戶能夠複製CSS樣式，如當用戶需要使用類似的樣式時，我們可以通過讓用戶方便的複製樣式來提高用戶體驗。

三、CSS禁止複製

有時候我們不希望用戶複製我們網頁中的CSS樣式，我們可以通過以下方法來禁止它：

    
        head, style, link, *[style]{
            -webkit-user-select:none!important;
            -moz-user-select:none!important;
            -khtml-user-select:none!important;
            -ms-user-select:none!important;
            user-select:none!important;
            -webkit-touch-callout:none!important;
        }
    

這個方法是通過將所有的CSS屬性設置為「none」來阻止用戶複製。這樣，用戶將無法使用右鍵複製樣式表。

四、怎麼複製CSS樣式

如果我們希望用戶能夠複製CSS樣式，可以使用以下方法：

    
        button.copy-css {
            background: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    

我們可以在頁面上添加一個複製按鈕，用戶可以通過點擊按鈕來複制CSS樣式。

五、CSS禁止複製文本

如果我們僅僅只是想禁止用戶複製文本並不想限制用戶複製CSS樣式，那麼可以使用以下方法：

    
        p.no-copy {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    

上面的代碼會將段落元素設置為無法被選中，這樣用戶就無法通過複製文本了。

六、複製CSS和SVG

很多時候我們在通過CSS來控制SVG圖像的樣式，如果我們想讓用戶複製SVG的樣式，可以使用以下代碼：

    
        svg {
            pointer-events: none;
        }

        .svg-copy {
            cursor: pointer;
            pointer-events: all;
        }
    

這會將SVG圖像的指針事件設置為「none」，使其不能被選擇。我們通過添加一個類「svg-copy」來允許用戶使用滑鼠來選擇SVG圖像上的樣式。

七、PS複製CSS

在使用PS設計網頁時，我們可以用PS的CSS導出插件來自動生成CSS代碼，這大大加快了網頁設計的速度和效率。

八、CSS設置不能複製

我們可以使用CSS將某個元素設置為不能被複制，以防止用戶複製它的內容：

    
        .no-copy {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    

使用類「no-copy」來設置一個元素不能被選中的效果。

九、CSS複製粘貼

如果我們想讓用戶方便的複製和粘貼我們的內容，可以使用以下代碼：

    
        button.copy-text {
            background: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    

我們可以在頁面上添加一個複製按鈕，讓用戶隨意複製我們想複製的內容。