首頁  >  文章  >  web前端  >  什麼是文字輪廓效果?

什麼是文字輪廓效果?

WBOY
WBOY轉載
2023-08-23 21:25:021272瀏覽

什麼是文字輪廓效果?

有時,我們需要只顯示文字的輪廓並刪除文字的填滿。也可以說是輪廓效果。

我們可以使用各種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標籤來建立一個HTML元素,並使用 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 屬性來更改文字的填滿顏色並設定文字的描邊。

第二種方法顯示「文字陰影」而不是顯示文字。第三種方法將文字轉換為 SVG,並使用與 SVG 相關的各種 CSS 屬性為文字添加輪廓效果。

以上是什麼是文字輪廓效果?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除