html中文字描边效果代码,css如何设置文字描边效果？
想要使用CSS給文字添加描邊效果，主要有兩種方法：使用text-stroke屬性或text-shadow屬性。
方法1：使用text-shadow屬性
text-shadow屬性用于向文本添加字體邊框或陰影。
text-shadow是實現(xiàn)Web描述效果中最為常見的一種方案，簡單的原理就是在文本的上、下、左、右添加文本陰影(不帶模糊的陰影)。
語法：text-shadow: h-shadow v-shadow blur-radius color|none;
屬性值：h-shadow：它在字體周圍設(shè)置水平陰影。
v-shadow：它設(shè)置字體周圍的垂直陰影。
blur-radius：設(shè)置字體周圍的模糊半徑。
color：它設(shè)置字體周圍的顏色。
none：它沒有在字體周圍設(shè)置任何內(nèi)容。
示例：
@import url(https://fonts.googleapis.com/css?family=Bangers);
body {
font-size: 50%;
line-height: 1;
}
h1 {
font: 8em/1 Bangers, sans-serif;
text-align: center;
text-shadow:
/* These four shadows create the most outer stroke */
-.025em -.025em 0 #444,
.025em -.025em 0 #444,
-.025em .025em 0 #444,
.025em .025em 0 #444;
color: #fff;
/* For non-webkit-browsers */
}
Hello World
效果圖：
方法2：使用text-stroke屬性
值得慶幸的是，現(xiàn)在可以直接使用text-stroke屬性實現(xiàn)描述效果。
text-stroke是text-stroke-width和text-stroke-color(給文本填充顏色)兩個屬性的簡寫。
text-stroke屬性用于向文本添加描邊。此屬性可用于更改文字的描邊寬度和顏色。使用-webkit-前綴支持此屬性。
語法：text-stroke: ;
示例：
@import url(https://fonts.googleapis.com/css?family=Bangers);
body {
font-size: 50%;
line-height: 1;
}
h1 {
font: 8em/1 Bangers, sans-serif;
text-align: center;
-webkit-text-stroke: 1px black;
color: #fff;
}
Hello World
效果圖：
有了text-stroke屬性，咱們可以非常輕易的實現(xiàn)文本描邊效果，也告別了使用text-shadow屬性來模擬文本描邊效果。
總結(jié)
以上是生活随笔為你收集整理的html中文字描边效果代码,css如何设置文字描边效果？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Markdown：数学公式练习（3）
- 下一篇： Markdown：数学公式（4）