[教學] CSS3如何修改反白文字的顏色 ::selection使用方法
「::selection」是CSS3才有的一個特效,為了讓使用者閱讀上更舒適,因此網頁設計者,會修改網頁反白文字後的顏色,來方便瀏覽者閱讀。你平常在網路上看文章時事後也會像這樣,把正在閱讀的地方,用滑鼠反白呢?應該看厭了那個單調的藍色了吧,試試這個方法,舒適閱讀。
如何修改反白文字的顏色
::selection的使用,是在CSS3之後才有,所以在IE家族中,IE9+才支援,在Firefox中需要加上其前缀“-moz”,還有是他的屬性,不能做大幅度修改,因為這個美化功能,純粹只針對顏色來做修改,因此如 : 字體大小、字體…等,即使下了font屬性,也不會生效。
第1步 使用方法如下,能用的屬性大概就是background、color和text-shadow,不知道還有沒有其他的。
::selection { background: 背景顏色值; color: 文字顏色值; } ::-moz-selection { background: 背景顏色值; color: 文字顏色值; }
第2步 如果想額外針對斜體、內容來做不一樣的美化,可以把指定的性質,加在「::selection」前面,例如「p::selection」、「i::selection」。
::selection { background: #ADADAD; color: #fff; } ::-moz-selection { background: #ADADAD; color: #fff; } p::selection { background: #ADADAD; color: #fff; } p::-moz-selection { background: #ADADAD; color: #fff; } i::selection { background: #FF18A6; color: #fff; } i::-moz-selection { background: #FF18A6; color: #fff; }
Leave a Reply