溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用CSS生成26個字母”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用CSS生成26個字母”吧！
實現(xiàn)效果如下（為實時渲染效果）：
引用CSS文件，例如：
<link rel="stylesheet" href="./css-letters1.css">
或者直接CSS代碼到你的項目中：
/* 全局樣式 */
.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;
}
/* 單個字母樣式 */
.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>
還是先看效果，實時渲染：
引用CSS文件，例如：
<link rel="stylesheet" href="./css-letters2.css">
或者直接復(fù)制CSS代碼到你的項目中，由于篇幅限制，我這里僅顯示前幾個字母的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>
每個字母都可以獨立使用。
不過這里的實現(xiàn)有個不好的是，這里的字母都是使用px單位實現(xiàn)的，因此，想要自如控制字母的大小不太方便。需要借助transform進行縮放控制才行。
使用CSS生成的 無襯線26個英文字母。
實時效果如下：
//zxx: 接縫處有些間隙是因為對字體進行縮放導致，實際1:1呈現(xiàn)時候不會有這個現(xiàn)象。
hover對應(yīng)代碼可以看到對應(yīng)字體部件，非常使用CSS圖形繪制的學習，如下截圖示意：
復(fù)制頁面上呈現(xiàn)的對應(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>
要顯示哪個字母，就復(fù)制對應(yīng)HTML到頁面上就好了。
感謝各位的閱讀，以上就是“怎么用CSS生成26個字母”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么用CSS生成26個字母這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼