怎么用CSS生成26個(gè)字母

這篇文章主要講解了“怎么用CSS生成26個(gè)字母”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用CSS生成26個(gè)字母”吧！

創(chuàng)新互聯(lián)公司專(zhuān)注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)、網(wǎng)站重做改版、澄城網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為澄城等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

一、借助CSS border實(shí)現(xiàn)案例

實(shí)現(xiàn)效果如下（為實(shí)時(shí)渲染效果）：

如何使用？

引用CSS文件，例如：

<link rel="stylesheet" href="./css-letters1.css">

或者直接CSS代碼到你的項(xiàng)目中：

/* 全局樣式 */
.letter {
    color: #2486ff;
    border-style: solid;
    border-width: .5em;
    display: inline-block;
    position: relative;
}
.letter:after {
    border-style: solid;
    border-width: .5em;
    content: '';
    position: absolute;
}
/* 單個(gè)字母樣式 */
.letter[data-char="A"] {
    border-bottom: none;
    border-radius: 1em 1em 0 0;
    height: 2.05em;
    margin-top: -.05em;
    width: 1em;
}
.letter[data-char="A"]:after {
    border-bottom: none;
    border-left: none;
    border-right: none;
    left: 0;
    right: 0;
    top: .75em;
}
.letter[data-char="B"] {
    border-radius: 0 1em 1em 0;
    height: .5em;
    width: 1em;
}
.letter[data-char="B"]:after {
    border-radius: 0 1em 1em 0;
    bottom: 100%;
    height: .5em;
    left: -.5em;
    width: .9em;    
}
.letter[data-char="C"] {
    border-right: none;
    border-radius: 1em 0 0 1em;
    height: 1.5em;
    width: 1.5em;
}
.letter[data-char="C"]:after {
    border-bottom: none;
    border-left: none;
    border-top: none;
    height: .5em;
    right: 0;
    top: 0;
    width: .5em;
}
...

HTML部分如下：

<span class="letter" data-char="A"></span>
<span class="letter" data-char="B"></span>
<span class="letter" data-char="C"></span>
<span class="letter" data-char="D"></span>
<span class="letter" data-char="E"></span>
<span class="letter" data-char="F"></span>
<span class="letter" data-char="G"></span>
<span class="letter" data-char="H"></span>
<span class="letter" data-char="I"></span>
<span class="letter" data-char="J"></span>
<span class="letter" data-char="K"></span>
<span class="letter" data-char="L"></span>
<span class="letter" data-char="M"></span>
<span class="letter" data-char="N"></span>
<span class="letter" data-char="O"></span>
<span class="letter" data-char="P"></span>
<span class="letter" data-char="Q"></span>
<span class="letter" data-char="R"></span>
<span class="letter" data-char="S"></span>
<span class="letter" data-char="T"></span>
<span class="letter" data-char="U"></span>
<span class="letter" data-char="V"></span>
<span class="letter" data-char="W"></span>
<span class="letter" data-char="X"></span>
<span class="letter" data-char="Y"></span>
<span class="letter" data-char="Z"></span>

二、border加圓角與另一種風(fēng)格字體

還是先看效果，實(shí)時(shí)渲染：

如何使用？

引用CSS文件，例如：

<link rel="stylesheet" href="./css-letters2.css">

或者直接復(fù)制CSS代碼到你的項(xiàng)目中，由于篇幅限制，我這里僅顯示前幾個(gè)字母的CSS樣式

.letter-a {
    position: relative;
    width: 30px;
    height: 40px;
    background: white;
    border-radius: 10px 10px 0 0;
    border-style: solid;
    border-color: currentColor currentColor transparent currentColor;
    border-width: 10px 10px 0 10px;
}
.letter-a::before {
    content: "";
    position: absolute;
    top: 10px;
    height: 10px;
    width: 30px;
    background: currentColor;
}
.letter-b {
    position: relative;
    width: 30px;
    height: 30px;
    border-width: 10px 10px 10px  10px;
    border-style: solid;
    border-color: transparent transparent transparent currentColor;
    background: transparent;
}
.letter-b::before {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    height: 10px;
    width: 30px;
    background: transparent;
    border-radius: 0 12.5px 12.5px 0;
    border: 10px solid currentColor;
}
.letter-b::after {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -10px;
    height: 10px;
    width: 30px;
    background: transparent;
    border-radius: 0 12.5px 12.5px 0;
    border: 10px solid currentColor;
}
...

HTML部分代碼使用示意：

<span class="letter-a"></span>
<span class="letter-b"></span>
<span class="letter-c"></span>
<span class="letter-d"></span>
<span class="letter-e"></span>
<span class="letter-f"></span>
<span class="letter-g"></span>
<span class="letter-h"></span>
<span class="letter-i"></span>
<span class="letter-j"></span>
<span class="letter-k"></span>
<span class="letter-l"></span>
<span class="letter-m"></span>
<span class="letter-n"></span>
<span class="letter-o"></span>
<span class="letter-p"></span>
<span class="letter-q"></span>
<span class="letter-r"></span>
<span class="letter-s"></span>
<span class="letter-t"></span>
<span class="letter-u"></span>
<span class="letter-v"></span>
<span class="letter-w"></span>
<span class="letter-x"></span>
<span class="letter-y"></span>
<span class="letter-z"></span>

每個(gè)字母都可以獨(dú)立使用。

不過(guò)這里的實(shí)現(xiàn)有個(gè)不好的是，這里的字母都是使用px單位實(shí)現(xiàn)的，因此，想要自如控制字母的大小不太方便。需要借助transform進(jìn)行縮放控制才行。

三、活用transform的css-sans字體生成

使用CSS生成的 無(wú)襯線26個(gè)英文字母。

實(shí)時(shí)效果如下：

//zxx: 接縫處有些間隙是因?yàn)閷?duì)字體進(jìn)行縮放導(dǎo)致，實(shí)際1:1呈現(xiàn)時(shí)候不會(huì)有這個(gè)現(xiàn)象。

hover對(duì)應(yīng)代碼可以看到對(duì)應(yīng)字體部件，非常使用CSS圖形繪制的學(xué)習(xí)，如下截圖示意：

如何使用？

復(fù)制頁(yè)面上呈現(xiàn)的對(duì)應(yīng)的CSS代碼，然后HTML部分如下：

<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
<div class="H"></div>
<div class="I"></div>
<div class="J"></div>
<div class="K"></div>
<div class="L"></div>
<div class="M"></div>
<div class="N"></div>
<div class="O"></div>
<div class="P"></div>
<div class="Q"></div>
<div class="R"></div>
<div class="S"></div>
<div class="T"></div>
<div class="U"></div>
<div class="V"></div>
<div class="W"></div>
<div class="X"></div>
<div class="Y"></div>
<div class="Z"></div>

要顯示哪個(gè)字母，就復(fù)制對(duì)應(yīng)HTML到頁(yè)面上就好了。

感謝各位的閱讀，以上就是“怎么用CSS生成26個(gè)字母”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么用CSS生成26個(gè)字母這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

分享文章：怎么用CSS生成26個(gè)字母
當(dāng)前網(wǎng)址：http://www.jbt999.com/article24/gsedce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、電子商務(wù)、做網(wǎng)站、微信小程序、網(wǎng)站收錄、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)