css3可以加文字描邊嗎

css3可以加描邊，方法：1、使用text-shadow屬性，通過給文字周圍添加文字陰影來實(shí)現(xiàn)描邊效果；2、使用text-stroke屬性，語法“text-stroke:描邊寬度顏色;”；3、利用SVG給文字加描邊。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、浉河網(wǎng)站維護(hù)、網(wǎng)站推廣。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

text-shadow 文字描邊

text-shadow:向文本設(shè)置陰影。

text-shadow:color||length||length||opacity

color:指定顏色。

length:第一個(gè)length指定陰影在水平方向上的延伸距離，第二個(gè)length指定陰影在垂直方向上的延伸距離，可以為負(fù)值。

opacity:指定陰影模糊效果的作用距離。

用逗號(hào)分隔的4個(gè)屬性值代表的方向順序?yàn)橛蚁伦笊稀?/p><!DOCTYPE html><html><head><meta charset="UTF-8"><title>text-shadow-文字描邊</title><style>.demo {height: 200px;text-align: center;font-family: Verdana;font-size: 30px;font-weight: bold;background: peru;color: #000;}.stroke {text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;}</style></head><body><div class="demo"><p>沒有添加描邊</p><p class="stroke">添加了字體描邊</p></div></body></html>

text-stroke 文字描邊

CSS 中有個(gè)專門用于文字描邊的屬性-webkit-text-stroke，可以控制描邊的寬度和顏色，比如

.text{ -webkit-text-stroke: 2px #333;}

效果如下

確實(shí)有描邊了，但是文字好像瘦了一圈，如果覺得不太明顯，可以再設(shè)置大一點(diǎn)

從這里可以看出，-webkit-text-stroke其實(shí)是居中描邊，并且是覆蓋在文本上的，也無法更改描邊方式。而事實(shí)上，很多設(shè)計(jì)工具都是可以選擇描邊方式的，比如 figma

那么，如何實(shí)現(xiàn)外描邊效果呢？

也是可以的！用兩層文本，一層文本描邊，一層文本漸變就可以了，為了節(jié)省標(biāo)簽，可以用偽元素來生成

<p class="text" data-title="為你定制發(fā)現(xiàn)精彩">為你定制發(fā)現(xiàn)精彩</p>

::before設(shè)置漸變，位于上方，原文本設(shè)置描邊，位于下方，注意把::before的-webkit-text-stroke去除

.text::before{ content: attr(data-title); position: absolute; background-image: linear-gradient(#FFCF02, #FF7352); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0;}.text{ -webkit-text-stroke: 6px #333;}

疊加示意如下

改變不同的描邊也不會(huì)出現(xiàn)文字“變瘦”的情況

SVG 文字描邊

SVG 也可以實(shí)現(xiàn)描邊效果，和 CSS 比較類似，應(yīng)該說 CSS 是借鑒 SVG 的，通過stroke和stroke-width來控制描邊顏色和大小，比如

.text{ /*其他*/ stroke-width: 4px; stroke: #333;}

可以得到這樣的效果

和 CSS 表現(xiàn)一樣，都是居中描邊，也無法改變。

不一樣的是，SVG 控制更為靈活，默認(rèn)是先填充、然后再描邊，所以看著是描邊在填充之上，但是，我們可以改變這種規(guī)則，設(shè)置先描邊，再填充，那么填充的顏色就會(huì)覆蓋在描邊之上了。SVG 中改變這種規(guī)則的可以通過 paint-order 來設(shè)置。

.text{ /*其他*/ stroke-width: 4px; stroke: #333; paint-order: stroke; /*先描邊*/}

這樣就實(shí)現(xiàn)了外描邊效果，是不是比 CSS 方便許多？

（學(xué)習(xí)視頻分享：css視頻教程）

本文題目：css3可以加文字描邊嗎
標(biāo)題路徑：http://chinadenli.net/article42/cgsshc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、建站公司、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站排名

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

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css3可以加文字描邊嗎