• 首頁 »
  • 網站佈景
  • 網頁設計
  • » [教學] CSS3如何修改反白文字的顏色 ::selection使用方法
    上一篇:

    [教學] CSS3如何修改反白文字的顏色 ::selection使用方法

    「::selection」是CSS3才有的一個特效,為了讓使用者閱讀上更舒適,因此網頁設計者,會修改網頁反白文字後的顏色,來方便瀏覽者閱讀。你平常在網路上看文章時事後也會像這樣,把正在閱讀的地方,用滑鼠反白呢?應該看厭了那個單調的藍色了吧,試試這個方法,舒適閱讀。

    如何修改反白文字的顏色

    [教學] CSS3如何修改反白文字的顏色 ::selection使用方法

    ::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;
    }
    Advertisement
    Follow US
    About Post
    Date: 2013.05.27 Tags: , , ,
    Discussion

    Leave a Reply