css3怎么加文字描邊

這篇文章主要介紹“css3怎么加文字描邊”，在日常操作中，相信很多人在css3怎么加文字描邊問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css3怎么加文字描邊”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為永年等服務(wù)建站，永年等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為永年企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

css3可以加描邊，方法：1、使用text-shadow屬性，通過(guò)給文字周?chē)砑游淖株幱皝?lái)實(shí)現(xiàn)描邊效果；2、使用text-stroke屬性，語(yǔ)法“text-stroke:描邊寬度 顏色;”；3、利用SVG給文字加描邊。

本教程操作環(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>沒(méi)有添加描邊</p>
			<p class="stroke">添加了字體描邊</p>
		</div>
	</body>

</html>

css3怎么加文字描邊

text-stroke 文字描邊

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

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

效果如下

css3怎么加文字描邊

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

css3怎么加文字描邊

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

css3怎么加文字描邊

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

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

<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;
}

疊加示意如下

css3怎么加文字描邊

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

css3怎么加文字描邊

SVG 文字描邊

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

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

可以得到這樣的效果

css3怎么加文字描邊

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

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

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

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

css3怎么加文字描邊

到此，關(guān)于“css3怎么加文字描邊”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

分享名稱(chēng)：css3怎么加文字描邊
文章鏈接：http://muchs.cn/article14/gddcde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站排名、ChatGPT、網(wǎng)站改版、定制開(kāi)發(fā)

廣告

聲明：本網(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；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司