什麼是文字輪廓效果？
- WBOY轉載
- 2023-08-23 21:25:021277瀏覽
有時，我們需要只顯示文字的輪廓並刪除文字的填滿。也可以說是輪廓效果。
我們可以使用各種CSS屬性來為文字產生輪廓效果。例如，我們可以為文字加上邊框，去掉文字的填滿色，並為文字加上輪廓效果。
在這裡，我們使用 HTML 和 CSS 三種不同的方法來顯示具有輪廓效果的文字。
使用各種CSS屬性
在此方法中，我們將使用三個 CSS 屬性為文字新增輪廓效果。第一個是“-webkit-text-fill-color”，用於將文字的填滿顏色變更為與背景顏色相同。第二個是“-webkit-text-lines-width”，用於添加文字的描邊寬度，第三個 CSS 屬性是“-webkit-text-lines-color”，用於為文字添加輪廓顏色。
文法
使用者可以依照以下語法使用三種不同的 CSS 屬性為文字新增輪廓效果。
-webkit-text-fill-color: color; -webkit-text-stroke-width: size; -webkit-text-stroke-color: color;
在上面的語法中，我們設定了文字的填滿顏色、描邊寬度，描邊表示輪廓顏色。
Example 1
的中文翻譯為：範例1
在下面的範例中，我們有一個帶有類別名為'text1'的div元素，其中包含一些文字。我們已經在CSS中設定了文字的字體大小。此外，為了為文字添加輪廓效果，我們設定了白色填滿顏色、'1px'的描邊寬度和'blue'的描邊顏色以顯示藍色輪廓。
在輸出中，使用者可以觀察到帶有藍色輪廓的文字。
<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>
Example 2
的翻譯為：範例2
在下面的範例中，我們為div元素設定了紅色背景。接下來，我們使用'red'作為填滿顏色，使填滿顏色與背景相同。在這裡，描邊寬度為'1.2px'，描邊顏色為'yellow'。
在輸出中，使用者可以觀察到紅色背景上帶有黃色輪廓的文字。
<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 偏移，第三個是模糊值，第四個是陰影顏色。
Example 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 圖像。之後，我們將設定描邊顏色、填滿顏色、描邊寬度等，使用各種CSS屬性為文字新增輪廓效果。
文法
使用者可以按照以下語法將文字轉換為SVG，從而為文字添加輪廓效果。
paint-order: stroke; fill: color; stroke: color;
在上面的語法中，我們設定了文字的填滿顏色。此外，我們也設定了文字的描邊顏色。 「paint-order: stroke」CSS 屬性允許我們在填滿顏色彼此相交時透過筆畫重疊填滿顏色。
Example 4
的中文翻譯為：範例 4
在下面的範例中，我們使用了
<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 屬性來更改文字的填滿顏色並設定文字的描邊。
第二種方法顯示「文字陰影」而不是顯示文字。第三種方法將文字轉換為 SVG，並使用與 SVG 相關的各種 CSS 屬性為文字添加輪廓效果。
以上是什麼是文字輪廓效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！