首頁 > 文章 > web前端 > css3可以加文字描邊嗎

css3可以加文字描邊嗎

青灯夜游原創: 2021-12-15 16:15:083502瀏覽

css3可以加描邊，方法：1、使用text-shadow屬性，透過在文字周圍加上文字陰影來實現描邊效果；2、使用text-stroke屬性，語法「text-stroke:描邊寬度顏色;」；3、利用SVG為文字加描邊。

css3可以加文字描邊嗎

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

text-shadow 文字描邊

text-shadow:設定陰影給文字。

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

color:指定顏色。
length:第一個length指定陰影在水平方向上的延伸距離，第二個length指定陰影在垂直方向上的延伸距離，可以為負值。
opacity:指定陰影模糊效果的作用距離。

以逗號分隔的4個屬性值代表的方向順序為右下左上。

<!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>

css3可以加文字描邊嗎

text-stroke 文字描邊

#CSS 中有個專門用於文字描邊的屬性-webkit-text-stroke，可以控制描邊的寬度和顏色，例如

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

效果如下

css3可以加文字描邊嗎

#確實有描邊了，但是文字好像瘦了一圈，如果覺得不太明顯，可以再設定大一點

css3可以加文字描邊嗎

從這裡可以看出，-webkit-text-stroke其實是居中描邊，是覆寫在文字上的，也無法改變描邊方式。而事實上，許多設計工具都是可以選擇描邊方式的，例如 figma

css3可以加文字描邊嗎

#那麼，如何實現外描邊效果呢？

也是可以的！用兩層文本，一層文本描邊，一層文本漸變就可以了，為了節省標籤，可以用偽元素來生成

<p class="text" data-title="为你定制 发现精彩">为你定制 发现精彩</p>

::before設置漸變，位於上方，原文本設定描邊，位於下方，注意把::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可以加文字描邊嗎

#改變不同的描邊也不會出現文字「變瘦」的情況

css3可以加文字描邊嗎

SVG 文字描邊

SVG 也可以實現描邊效果，和CSS 比較類似，應該說CSS 是藉用SVG 的，透過stroke 和stroke-width來控制描邊顏色和大小，例如

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

可以得到這樣的效果

css3可以加文字描邊嗎

和CSS 表現一樣，都是居中描邊，也無法改變。

不一樣的是，SVG 控制更為靈活，預設是先填充、然後再描邊，所以看著是描邊在填充之上，但是，我們可以改變這種規則，設定先描邊，再填充，那麼填滿的顏色就會覆蓋在描邊之上了。 SVG 中改變這種規則的可以透過 paint-order 來設定。

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

這樣就實現了外描邊效果，是不是比 CSS 方便許多？

css3可以加文字描邊嗎

（學習影片分享：css影片教學）

以上是css3可以加文字描邊嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css3怎樣實現div右側滑入下一篇：css3怎樣實現div右側滑入

看更多