最近網上熱炒的乙個話題是如何用css美化半個字元。就是把乙個字元劈成兩半，一半是a樣式，一半是b樣式。當然，大家都知道，不論是中文字元還是西文字元，單個字元否是無法拆分的，它們是文字的最新單元，如果是美化半個詞或半個句子，這估計大家都知道如何做，也很常見。但半個字元如何美化呢？當然有辦法，這裡需要的就是藝術。
先看看需要的效果圖。
css美化半個字元的基本思路
左邊是一種顏色，右邊是一種顏色。如果是用做，這當然很容易，但有的侷限性，比如不能動態的生成字元樣式。下面我們就來看看用純css如何實現這樣的效果。
css美化半個字元的基本思路
思路很簡單，就是乙個字寫兩遍，分別顯示一半。思路很清楚，也很簡單，但如何實現呢？當然不能真的把乙個字寫兩遍，這樣也太愚蠢了，而且當使用者拷貝貼上這段文字時會粘出同樣的文字兩份。這裡就需要用到css偽元素:before和:after，記住這個「偽元素」的「偽」字，表明它本來是不存在的。我們的方法就是在偽元素裡放置相同的字元，只顯示半個，而原字元顯示另外一半，最後把它們拼成乙個字。
css**
css code複製內容到剪貼簿
html**
xml/html code複製內容到剪貼簿
程式設計客棧
需要做的就是將.halfstylecss類應用到每個需要半邊美化的字元上。在上面的**示例中，每個span裡都包含了乙個字元，我們在上面放置了data-屬性，例如data-content="風&qudpzhgfmjiot;，之後在偽元素裡我們使用了attr(data-content)方法，這樣.halfstyle:before就會變得動態，不需要你手工的硬編碼它們的內容。
對於多個字元需要美化的情況，我們可以建立一段jquery**自動將所有有.texttohalfstylecss類字元新增這種效果：
j**ascript code複製內容到剪貼簿
這樣，不論是一段文字還是整篇文字，我們都能一次搞定，不必手工乙個乙個的設定，也不必乙個乙個的做圖！
高階做法：左右半個字元都用偽元素生成
上面我們的做法中，文字的左半邊是用:before偽元素生成的，而右半邊使用的是原文本。但實際上我們可以將左右兩邊都用偽元素生成——右半邊用:after實現。
css**
css code複製內容到剪貼簿
你會發現，我們的實現方法可以很靈活，現在表象上是有三個字重疊，我們可以讓每個字都各佔1/3，這樣，我得到乙個三色字。上面這些例子都是左右分色，其實我們也可以讓它上下分色或上中下分色。
想起了電影《臥虎藏龍》了的一句話，「心有多大，江湖就有多大」，作為web程式設計師也是如此，只有我們用於探索和創新，有很多任務我們都可以用更簡單，更方便的方法完成。你有此同感嗎？
本文標題: css美化半個字元的巧妙方法
本文位址:
python替換多個字串的方法
參考 import re a 123 n b re.sub r s a print b 最後輸出結果為 123 解釋一下這個正規表示式的意思 r s 1 r指明這是乙個正規表示式 2 內是乙個字符集，字符集內的字元任何乙個被匹配，都算匹配成功，比如r a bcd e 可以匹配到 abe ace ad...
把乙個字串左旋k個字元的2種方法
第一種是乙個字元乙個字元的左移，把第乙個字元存臨時變數裡面，把後面的字元每乙個往前移動乙個位置，0 不移動，然後把臨時變數的值放在 0 前面的位置。這樣重複k次 第二種是把需要左移的k個字元逆序，再把剩下的字元逆序，最後再把整體逆序，就得到我們想要的結果了。第一種方法的實現 include incl...
JS刪除String裡某個字元的方法
關於js刪除string裡的字元的方法，一般使用replace 方法。但是這個方法只會刪除一次，如果需要將string裡的所以字元都刪除就要用到正則。1 2 3 4 varstr abcdaabbssaaa varreg newregexp a g vara str.replace reg,cons...