最近網上熱炒的一個話題是如何用CSS美化半個字符。就是把一個字符劈成兩半，一半是A樣式，一半是B樣式。當然，大家都知道，不論是中文字符還是西文字符，單個字符否是無法拆分的，它們是文字的最新單元，如果是美化半個詞或半個句子，這估計大家都知道如何做，也很常見。但半個字符如何美化呢？當然有辦法，這里需要的就是藝術。

先看看需要的效果圖。

CSS美化半個字符的基本思路

左邊是一種顏色，右邊是一種顏色。如果是用圖片做，這當然很容易，但圖片有圖片的局限性，比如不能動態的生成字符樣式。下面我們就來看看用純CSS如何實現這樣的效果。
CSS美化半個字符的基本思路

思路很簡單，就是一個字寫兩遍，分別顯示一半。思路很清楚，也很簡單，但如何實現呢？當然不能真的把一個字寫兩遍，這樣也太愚蠢了，而且當用戶拷貝粘貼這段文字時會粘出同樣的文字兩份。這里就需要用到CSS偽元素:before和:after，記住這個“偽元素”的“偽”字，表明它本來是不存在的。我們的方法就是在偽元素里放置相同的字符，只顯示半個，而原字符顯示另外一半，最后把它們拼成一個字。

CSS代碼

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表