css3中user select的用法詳解

2022-08-05 15:39:20 字數 1448 閱讀 7890

user-select屬性是css3新增的屬性,用於設定使用者是否能夠選中文字。可用於除替換元素外的所有元素,以下是user-select的主要用法和注意事項的說明,更多資訊可參考如下css3文件說明。

user-select:none | text | all | element

預設值:text

適用範圍:除替換元素外的所有元素

none:文字不能被選擇

text:可以選擇文字

all:當所有內容作為乙個整體時可以被選擇。如果雙擊或者在 上下文上點選子元素,那麼被選擇的部分將是以該子元素 向上回溯的最高祖先元素。

element:可以選擇文字,但選擇範圍受元素邊界的約束

以下圖列出的是值為none|text|all的情況下各個瀏覽器的支援程度;值為element時,大部分瀏覽器不支援,故不列出。

1.ie6-9不支援該屬性,但支援使用標籤屬性onselectstart="return false;"來達到user-select:none的效果;safarichrome也支援該標籤屬性;

2.直到opera12.5仍然不支援該屬性,但和ie6-9一樣,也支援使用私有的標籤屬性unselectable="on"來達到user-select:none的效果;unselectable的另乙個值是off;

3.除chrome和safari外,在其它瀏覽器中,如果將文字設定為-ms-user-select:none;,則使用者將無法在該文字塊中開始選擇文字。不過,如果使用者在頁面的其他區域開始選擇文字,則使用者仍然可以繼續選擇將文字設定為-ms-user-select:none;的區域文字;

4.對應的指令碼特性為userselect

css**:

.box
html**:

這是測試資料

本文**於:猿2048→

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性,但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...

Css3中的背景

css3對背景作了很多改變,最明顯的是可以選擇多重背景,同時它也增加了四個新的屬性。多重背景 css3中,對乙個元素可以使用一張以上的背景。除了使用逗號將分開以外,其 與css2相同。第乙個宣告的定位在元素的頂部,接下來的層列於下,像這樣 該屬確定背景畫區,有以下幾種可能的屬性 background...

CSS3中的動畫

animation實現動畫主要由兩個部分組成 通過類似flash動畫的關鍵幀來宣告乙個動畫 在animation屬性中呼叫關鍵幀宣告的動畫實現乙個更為複雜的動畫效果 設定關鍵幀 keyframes spread 33 66 100 注意 寫相容的時候瀏覽器字首是放在 keyframes中間 例如 w...