有時,我們需要只顯示文字的輪廓並刪除文字的填滿。也可以說是輪廓效果。
我們可以使用各種CSS屬性來為文字產生輪廓效果。例如,我們可以為文字加上邊框,去掉文字的填滿色,並為文字加上輪廓效果。
在這裡,我們使用 HTML 和 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;
在上面的語法中,我們設定了文字的填滿顏色、描邊寬度,描邊表示輪廓顏色。
在下面的範例中,我們有一個帶有類別名為'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>
在下面的範例中,我們為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: x-offset y-offset blur color;
「text-shadow」屬性採用 4 個不同的值來設定陰影。第一個是 x 偏移,第二個是 y 偏移,第三個是模糊值,第四個是陰影顏色。
在下面的範例中,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 屬性允許我們在填滿顏色彼此相交時透過筆畫重疊填滿顏色。
在下面的範例中,我們使用了
<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中文網其他相關文章!