CSS3實(shí)現(xiàn)文字描邊的2種方法(小結(jié))
發(fā)布時(shí)間：2020-02-14 16:44:52 作者： 你不知道的巨蟹 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS3實(shí)現(xiàn)文字描邊的2種方法(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
問(wèn)題
最近遇到一個(gè)需求，需要實(shí)現(xiàn)文字的描邊效果，如下圖
解決方法一
首先想到去看CSS3有沒(méi)有什么屬性可以實(shí)現(xiàn)，后來(lái)被我找到了text-stroke
該屬性是一個(gè)復(fù)合屬性，可以設(shè)置文字寬度和文字描邊顏色
該屬性使用很簡(jiǎn)單：text-stroke:1px#f00;（1px是文字寬度，#ff是文字描邊顏色）
本以為該屬性的兼容性會(huì)及時(shí)止住我微微上揚(yáng)的嘴角，隨后逐漸凝固
但出乎意料的是大多瀏覽器已經(jīng)開(kāi)始支持該屬性，只需要加上前綴-webkit-即可
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-stroke-文字描邊</title>
<style>
.demo {
color: mistyrose;
text-align: center;
font-family: Verdana;
font-size: 30px;
font-weight: bold;
}
.stroke {
-webkit-text-stroke: 1px greenyellow;
}
</style>
</head>
<body>
<div class="demo">
<p>沒(méi)有添加描邊</p>
<p class="stroke">添加了字體描邊</p>
</div>
</body>
</html>
解決方法二（推薦）
偶然間發(fā)現(xiàn)一種即使不用text-stroke屬性也能夠?qū)崿F(xiàn)文字描邊的方法—— text-shadow
并且text-shadow屬性的兼容性更好，也不用加前綴-webkit-
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-shadow-文字描邊</title>
<style>
.demo {
text-align: center;
font-family: Verdana;
font-size: 30px;
font-weight: bold;
color: red;
}
.stroke {
text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
}
</style>
</head>
<body>
<div class="demo">
<p>沒(méi)有添加描邊</p>
<p class="stroke">添加了字體描邊</p>
</div>
</body>
</html>
css 模擬文字描邊效果2
p{
text-shadow:
-1px -1px 0 #4f4d57,
1px -1px 0 #4f4d57,
-1px 1px 0 #4f4d57,
1px 1px 0 #4f4d57,
0px 2px 2px rgba(0,0,0,0.6);
font-size: 15px;
color: #f2f2f2;
font-family:"微軟雅黑";
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- CSS3作為新興的前端技術(shù)可以實(shí)現(xiàn)很多復(fù)雜變化的效果，比如文字描邊。這里主要用到text-shadow屬性，顧名思義就是為文字加上陰影效果，本文給大家介紹純CSS3代碼實(shí)現(xiàn)文字描2016-04-25
- 這篇文章主要介紹了CSS將文字描邊及填充文字顏色的方法,分別為text-stroke和text-fill-color屬性的使用方法講解,注意瀏覽器的兼容問(wèn)題,需要的朋友可以參考下2016-03-07
CSS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法
下面小編就為大家?guī)?lái)一篇CSS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-25- 下面小編就為大家?guī)?lái)一篇關(guān)于CSS3文本陰影text-shadow屬性詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-08-08
CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)
這篇文章主要介紹了CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-04-26CSS3 text-shadow實(shí)現(xiàn)文字陰影效果
這篇文章主要介紹了CSS3 text-shadow實(shí)現(xiàn)文字陰影效果的方法，豐富文字排版布局美化效果，感興趣的小伙伴們可以參考一下2016-02-24- 這篇文章主要介紹了舉例詳解CSS中的text-shadow文字陰影效果使用,text-shadow的運(yùn)用是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-19
- 這篇文章主要介紹了用CSS的text-shadow制作超炫文字效果全攻略,文中給出了諸多陰影效果示例,超級(jí)推薦!需要的朋友可以參考下2015-07-23
- 前段時(shí)間整理了CSS3中的漸變Gradient、透明度RGBA、邊框圓角box-radius三個(gè)新屬性的使用方法，這幾次繼續(xù)整理了有關(guān)于CSS3的text-shadow的使用方法,需要了解的朋友可以詳細(xì)2012-12-25
CSS3基礎(chǔ)(RGBa、text-shadow、box-shadow、border-radius)
本文介紹CSS 3部分新屬性基礎(chǔ)，包括RGBa、text-shadow、box-shadow、border-radius。這些屬性通常用來(lái)增強(qiáng)網(wǎng)頁(yè)布局和美譽(yù)度。（譯者注：在支持CSS3的瀏覽器如Firefox、Safa2012-11-13