資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學文字輪廓效果是什麼？
有時，我們只需要顯示文字的輪廓，並移除文字的填充。我們也可以稱之為輪廓效果。
我們可以使用各種CSS屬性來為文字生成輪廓效果。例如，我們可以向文字新增邊框，並移除文字的填充顏色以向文字新增輪廓效果。
這裡，我們有三種不同的方法可以使用HTML和CSS顯示帶有輪廓效果的文字。
使用各種CSS屬性
在這種方法中，我們將使用三個CSS屬性來向文字新增輪廓效果。第一個是“-webkit-text-fill-color”，用於將文字的填充顏色更改為與背景顏色相同。第二個是“-webkit-text-stroke-width”，用於新增文字的描邊寬度，第三個CSS屬性是“-webkit-text-stroke-color”，用於向文字新增輪廓顏色。
語法
使用者可以按照以下語法使用三個不同的CSS屬性來向文字新增輪廓效果。
-webkit-text-fill-color: color; -webkit-text-stroke-width: size; -webkit-text-stroke-color: color;
在上面的語法中，我們設定了文字的填充顏色、描邊寬度和描邊（即輪廓顏色）。
示例1
在下面的示例中，我們有一個類名為“text1”的div元素，其中包含一些文字。我們在CSS中設定了文字的字型大小。此外，為了向文字新增輪廓效果，我們為文字設定了白色填充顏色，“1px”描邊寬度和“藍色”描邊顏色以顯示藍色輪廓。
在輸出中，使用者可以看到帶有藍色輪廓的文字。
<html>
<head>
<style>
.text1 {
font-size: 50px;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
}
</style>
</head>
<body>
<h2>Using the <i> different CSS properties </i> to add outline effect on the text.</h2>
<div class = "text1">This text has a default background.</div>
</body>
</html>
示例2
在下面的示例中，我們為div元素設定了紅色背景。接下來，我們使用“紅色”作為填充顏色，使其填充顏色與背景顏色相同。這裡的描邊寬度為“1.2px”，描邊顏色為“黃色”。
在輸出中，使用者可以看到在紅色背景上帶有黃色輪廓的文字。
<html>
<head>
<style>
.text {
font-size: 50px;
width: 600px;
height: auto;
background-color: red;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1.2px;
-webkit-text-stroke-color: yellow;
}
</style>
</head>
<body>
<h2>Using the <i> different CSS properties </i> to add outline effect on the text</h2>
<div class = "text"> This text has a red background. </div>
</body>
</html>
使用“text-shadow” CSS屬性
在這種方法中，我們將使用“text-shadow” CSS屬性為文字生成輪廓效果。如果我們將文字顏色設定為與背景顏色相同來隱藏文字，並且只顯示文字陰影，則可以生成輪廓效果。
語法
使用者可以按照以下語法使用“text-shadow” CSS屬性來向文字新增輪廓效果。
text-shadow: x-offset y-offset blur color;
“text-shadow”屬性採用4個不同的值來設定陰影。第一個是x偏移量，第二個是y偏移量，第三個是模糊值，第四個是陰影顏色。
示例3
在下面的示例中，div元素包含文字。在CSS中，我們將背景顏色和字型顏色設定為相同。之後，我們使用“text-shadow” CSS屬性新增輪廓效果。這裡，我們使用了4對4個值作為“text-shadow”的值。第一對用於右側陰影，第二對用於下側陰影，第三對用於左側陰影，最後一對用於上側陰影。
實際上，它顯示的是文字陰影而不是描邊，從而產生了輪廓效果。
<html>
<head>
<style>
.text {
color: rgb(117, 117, 235);
font-size: 50px;
background-color: rgb(117, 117, 235);
text-shadow: -1px -1px 2px red, 1px -1px 2px red, -1px 1px 2px red, 1px 1px 2px red;
}
</style>
</head>
<body>
<h2>Using the <i> text-shadow CSS property </i> to add outline effect on the text</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
</body>
</html>
將文字新增到<SVG>標籤中併為文字應用描邊
在這裡，我們將文字轉換為SVG影像。之後，我們將使用各種CSS屬性來設定描邊顏色、填充顏色、描邊寬度等，以向文字新增輪廓效果。
語法
使用者可以按照以下語法透過將文字轉換為SVG來向文字新增輪廓效果。
paint-order: stroke; fill: color; stroke: color;
在上面的語法中，我們設定了文字的填充顏色。此外，我們還設定了文字的描邊顏色。“paint-order: stroke” CSS屬性允許我們在它們彼此相交時透過描邊來覆蓋填充顏色。
示例4
在下面的示例中，我們使用了<Svg> HTML標籤建立一個HTML元素，並使用<text> HTML標籤在SVG中新增文字。在CSS中，我們將“stroke-width”設定為3px以顯示3px的輪廓，並將“stroke-linejoin”設定為round，以便每當兩條線連線時，它們都以圓形形狀連線。此外，我們使用了“fill: white”將文字顏色設定為與背景顏色相同，並使用“stroke”設定為棕色以顯示帶有棕色輪廓的文字。
<html>
<head>
<style>
svg {
font-size: 35px;
width: 490px;
height: 100;
}
.text {
stroke-width: 3px;
stroke-linejoin: round;
paint-order: stroke;
fill: white;
stroke: brown;
}
</style>
</head>
<body>
<h2>Using the <i> SVG text </i> to add outline effect on the text</h2>
<svg viewBox = "0 0 490 100">
<text class = "text" x = "10" y = "45"> This text is in the svg element </text>
</svg>
</body>
</html>
我們已經看到了三種向文字新增輪廓效果的方法。第一種方法使用三個不同的CSS屬性來更改文字的填充顏色並設定文字的描邊。
第二種方法顯示“text-shadow”而不是顯示文字。第三種方法將文字轉換為SVG，並使用與SVG相關的各種CSS屬性來向文字新增輪廓效果。
瀏覽量：285
