這篇文章主要介紹了純CSS實現(xiàn)設(shè)置半個字符的樣式,分別實現(xiàn)了水平和垂直一半、水平和垂直三分之一等效果,需要的朋友可以參考下。

在stackoverflow上看到的問題怎么給半個字符設(shè)置樣式，很多大神給出了答案。我就等就來學習圍觀吧。

一：基本解決方案：

html:

代碼如下:

<spanclass=”halfStyle”data-content=”X”>X</span>

<spanclass=”halfStyle”data-content=”Y”>Y</span>

<spanclass=”halfStyle”data-content=”Z”>Z</span>

<spanclass=”halfStyle”data-content=”A”>A</span>

css:

代碼如下:

.halfStyle{

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:black;/*ortransparent,anycolor*/

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

}

.halfStyle:before{

display:block;

z-index:1;

position:absolute;

top:0;

left:0;

width:50%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

color:#f00;

}

效果如圖：

這種方法用于任何動態(tài)文本或單個字符，并且都是自動適用的。所有你需要做的就是在目標文本上添加一個class，剩下的就解決了。

同時，保留了原文的可訪問性，可以被盲人或視障人士使用的屏幕閱讀器識別。

單個字符的實現(xiàn)：

純CSS。所有你需要做的就是把.halfStyleclass用在每個你想要渲染一半樣式字符的元素上。

對于每個包含字符的span元素，你可以添加一個data屬性，比如data-content=”X”，并且在偽元素上使用content:attr(data-content)；這樣，.halfStyle:beforeclass將會是動態(tài)的，你不需要為每個實例進行硬編碼

以下其它效果自行測試了。。。

二：左右開弓，兩邊都設(shè)置樣式

更改CSS:

代碼如下:

.halfStyle{

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:transparent;/*hidethebasecharacter*/

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

}

.halfStyle:before{/*createstheleftpart*/

display:block;

z-index:1;

position:absolute;

top:0;

width:50%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#f00;/*fordemopurposes*/

text-shadow:2px-2px0px#af0;/*fordemopurposes*/

}

.halfStyle:after{/*createstherightpart*/

display:block;

direction:rtl;/*veryimportant,willmakethewidthtostartfromright*/

position:absolute;

z-index:2;

top:0;

left:50%;

width:50%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#000;/*fordemopurposes*/

text-shadow:2px2px0px#0af;/*fordemopurposes*/

}

三：設(shè)置水平一半的樣式

CSS:

代碼如下:

.halfStyle{

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:transparent;/*hidethebasecharacter*/

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

}

.halfStyle:before{/*createsthetoppart*/

display:block;

z-index:2;

position:absolute;

top:0;

height:50%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#f00;/*fordemopurposes*/

text-shadow:2px-2px0px#af0;/*fordemopurposes*/

}

.halfStyle:after{/*createsthebottompart*/

display:block;

position:absolute;

z-index:1;

top:0;

height:100%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#000;/*fordemopurposes*/

text-shadow:2px2px0px#0af;/*fordemopurposes*/

}

四：水平三分之一的樣式

css:

代碼如下:

.halfStyle{/*basecharandalsothebottom1/3*/

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:transparent;

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

color:#f0f;

text-shadow:2px2px0px#0af;/*fordemopurposes*/

}

.halfStyle:before{/*createsthetop1/3*/

display:block;

z-index:2;

position:absolute;

top:0;

height:33.33%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#f00;/*fordemopurposes*/

text-shadow:2px-2px0px#fa0;/*fordemopurposes*/

}

.halfStyle:after{/*createsthemiddle1/3*/

display:block;

position:absolute;

z-index:1;

top:0;

height:66.66%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#000;/*fordemopurposes*/

text-shadow:2px2px0px#af0;/*fordemopurposes*/

}

五：垂直三分之的樣式

css:

代碼如下:

.halfStyle{/*basecharandalsotheright1/3*/

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:transparent;/*hidethebasecharacter*/

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

color:#f0f;/*fordemopurposes*/

text-shadow:2px2px0px#0af;/*fordemopurposes*/

}

.halfStyle:before{/*createstheleft1/3*/

display:block;

z-index:2;

position:absolute;

top:0;

width:33.33%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#f00;/*fordemopurposes*/

text-shadow:2px-2px0px#af0;/*fordemopurposes*/

}

.halfStyle:after{/*createsthemiddle1/3*/

display:block;

z-index:1;

position:absolute;

top:0;

width:66.66%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#000;/*fordemopurposes*/

text-shadow:2px2px0px#af0;/*fordemopurposes*/

}

更多信息請查看IT技術(shù)專欄