CSS炫酷字體有兩層是指一種能夠通過(guò)CSS樣式來(lái)制作出雙層字體效果的技術(shù)。下面我們將分享如何利用CSS樣式制作出這種酷炫的字體效果。

.layer-text {
position: relative;
font-size: 4em;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.2),0 2px 0 rgba(0,0,0,0.15),0 3px 0 rgba(0,0,0,0.1),0 4px 0 rgba(0,0,0,0.05),0 5px 0 rgba(0,0,0,0.01),0 0 5px rgba(255,255,255,0.9),0 0 10px rgba(255,255,255,0.8),0 0 20px rgba(255,255,255,0.7),0 0 40px rgba(255,255,255,0.5),0 0 80px rgba(255,255,255,0.2);
}
.layer-text::before,.layer-text::after {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: #4081f3;
transform: skewX(-15deg) skewY(0deg);
text-shadow: 
-1px -1px 0 rgba(0, 0, 0, 0.2), 
-2px -2px 0 rgba(0, 0, 0, 0.15), 
-3px -3px 0 rgba(0, 0, 0, 0.1),
-4px -4px 0 rgba(0, 0, 0, 0.05), 
-5px -5px 0 rgba(0, 0, 0, 0.01);
}
.layer-text::before {
z-index: -1;
}
.layer-text::after {
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.2), 
2px 2px 0 rgba(0, 0, 0, 0.15), 
3px 3px 0 rgba(0, 0, 0, 0.1),
4px 4px 0 rgba(0, 0, 0, 0.05), 
5px 5px 0 rgba(0, 0, 0, 0.01);
z-index: -2;
}

以上代碼使用了一個(gè)含有雙層字體效果的CSS class名稱，即“l(fā)ayer-text”。該class中包含了“position: relative;”屬性和“text-shadow”屬性。同時(shí)也定義了該class中的偽元素“::before”和“::after”。其中，偽元素“::before”被定義為z-index值為-1，來(lái)使其顯示在下層。而偽元素“::after”被定義為z-index值為-2，來(lái)使其顯示在更深的下層。

此外，還需要在HTML中為需要應(yīng)用該CSS樣式的元素添加一個(gè)“data-text”屬性，這個(gè)屬性的值就是我們需要設(shè)置的文字。

可以使用下面這段HTML代碼來(lái)應(yīng)用CSS樣式：

<div class="layer-text" data-text="Double Layer Text">Double Layer Text</div>

用上述代碼，就可以輕松實(shí)現(xiàn)一個(gè)雙層字體效果，給網(wǎng)站帶來(lái)更多的視覺(jué)效果和美感。