时间:2021-05-08
在stackoverflow上看到的问题怎么给半个字符设置样式,很多大神给出了答案。我就等就来学习围观吧。
一:基本解决方案:
html:
复制代码代码如下:
<span class=”halfStyle” data-content=”X”>X</span>
<span class=”halfStyle” data-content=”Y”>Y</span>
<span class=”halfStyle” data-content=”Z”>Z</span>
<span class=”halfStyle” data-content=”A”>A</span>
css:
复制代码代码如下:
.halfStyle {
position:relative;
display:inline-block;
font-size:80px;
color: black;
overflow:hidden;
white-space: pre;
}
.halfStyle:before {
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width: 50%;
content: attr(data-content);
overflow:hidden;
color: #f00;
}
效果如图:
这种方法用于任何动态文本或单个字符,并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class,剩下的就解决了。
同时,保留了原文的可访问性,可以被盲人或视障人士使用的屏幕阅读器识别。
单个字符的实现:
纯CSS。所有你需要做的就是把.halfStyle class用在每个你想要渲染一半样式字符的元素上。
对于每个包含字符的span元素,你可以添加一个data属性,比如data-content=”X”,并且在伪元素上使用content:attr(data-content);这样,.halfStyle:before class将会是动态的,你不需要为每个实例进行硬编码
以下其它效果自行测试了。。。
二:左右开弓,两边都设置样式
更改CSS:
复制代码代码如下:
.halfStyle {
position:relative;
display:inline-block;
font-size:80px;
color: transparent;
overflow:hidden;
white-space: pre;
}
.halfStyle:before {
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: #f00;
text-shadow: 2px -2px 0px #af0;
}
.halfStyle:after {
display:block;
direction: rtl;
position:absolute;
z-index:2;
top:0;
left:50%;
width: 50%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: #000;
text-shadow: 2px 2px 0px #0af;
}
三:设置水平一半的样式
CSS:
复制代码代码如下:
.halfStyle {
position:relative;
display:inline-block;
font-size:80px;
color: transparent;
overflow:hidden;
white-space: pre;
}
.halfStyle:before {
display:block;
z-index:2;
position:absolute;
top:0;
height: 50%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: #f00;
text-shadow: 2px -2px 0px #af0;
}
.halfStyle:after {
display:block;
position:absolute;
z-index:1;
top:0;
height: 100%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: #000;
text-shadow: 2px 2px 0px #0af;
}
四:水平三分之一的样式
css:
复制代码代码如下:
.halfStyle {
position:relative;
display:inline-block;
font-size:80px;
color: transparent;
overflow:hidden;
white-space: pre;
color: #f0f;
text-shadow: 2px 2px 0px #0af;
}
.halfStyle:before {
display:block;
z-index:2;
position:absolute;
top:0;
height: 33.33%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: #f00;
text-shadow: 2px -2px 0px #fa0;
}
.halfStyle:after {
display:block;
position:absolute;
z-index:1;
top:0;
height: 66.66%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: #000;
text-shadow: 2px 2px 0px #af0;
}
五:垂直三分之的样式
css:
复制代码代码如下:
.halfStyle {
position:relative;
display:inline-block;
font-size:80px;
color: transparent;
overflow:hidden;
white-space: pre;
color: #f0f;
text-shadow: 2px 2px 0px #0af;
}
.halfStyle:before {
display:block;
z-index:2;
position:absolute;
top:0;
width: 33.33%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: #f00;
text-shadow: 2px -2px 0px #af0;
}
.halfStyle:after {
display:block;
z-index:1;
position:absolute;
top:0;
width: 66.66%;
content: attr(data-content);
overflow:hidden;
pointer-events: none;
color: #000;
text-shadow: 2px 2px 0px #af0;
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近网上热炒的一个话题是如何用CSS美化半个字符。就是把一个字符劈成两半,一半是A样式,一半是B样式。当然,大家都知道,不论是中文字符还是西文字符,单个字符否是
效果展示实现原理 1.html:一般就是一个div:,样式根据需求设计。 2.JS:1)将所有的验证码所用的字符放在一个字符串中 2)在这个字符串的
1.设置fomat格式,如下:复制代码代码如下:#取前5个字符,跳过4个字符华,再取3个字符format='5s4x3s'2.使用struck.unpack获取
1.实现一个函数,可以左旋字符串中的k个字符。ABCD左旋一个字符得到BCDAABCD左旋两个字符得到CDAB1.暴力移位法#include#include#i
字符匹配:.:匹配任意单个字符[]:匹配指定范围内的任意单个字符;[^]:匹配制定范围外任意单个字符[:digit:]lowerupperalphaalnums