Heim  >  Artikel  >  Web-Frontend  >  Können Sie Textstriche in CSS3 hinzufügen?

Können Sie Textstriche in CSS3 hinzufügen?

青灯夜游
青灯夜游Original
2021-12-15 16:15:083515Durchsuche

Css3 kann Striche hinzufügen. Methoden: 1. Verwenden Sie das Textschattenattribut, um Textschatten um den Text herum hinzuzufügen, um den Stricheffekt zu erzielen. "; 3. Verwenden Sie SVG, um dem Text Striche hinzuzufügen.

Können Sie Textstriche in CSS3 hinzufügen?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

text-shadow Textstrich

text-shadow: Setzt einen Schatten auf den Text.

text-shadow:color||length||length||opacity
  • Farbe: Farbe angeben.

  • Länge: Die erste Länge gibt den Ausdehnungsabstand des Schattens in horizontaler Richtung an, und die zweite Länge gibt den Ausdehnungsabstand des Schattens in vertikaler Richtung an, der ein negativer Wert sein kann.

  • Deckkraft: Gibt den Abstand des Schattenunschärfeeffekts an.

Die Richtungsreihenfolge, die durch die vier durch Kommas getrennten Attributwerte dargestellt wird, ist unten rechts und oben links.

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

Können Sie Textstriche in CSS3 hinzufügen?

Text-Stroke Text-Stroke

Es gibt in CSS ein spezielles Attribut -webkit-text-Stroke für Text-Stroke, das die Breite und Farbe des Strichs steuern kann, z -webkit-text-stroke,可以控制描边的宽度和颜色,比如

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

效果如下

Können Sie Textstriche in CSS3 hinzufügen?

确实有描边了,但是文字好像瘦了一圈,如果觉得不太明显,可以再设置大一点

Können Sie Textstriche in CSS3 hinzufügen?

从这里可以看出,-webkit-text-stroke其实是 居中描边,并且是覆盖在文本上的,也无法更改描边方式。而事实上,很多设计工具都是可以选择描边方式的,比如 figma

Können Sie Textstriche in CSS3 hinzufügen?

那么,如何实现外描边效果呢?

也是可以的!用两层文本,一层文本描边,一层文本渐变就可以了,为了节省标签,可以用伪元素来生成

<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;
}

叠加示意如下

Können Sie Textstriche in CSS3 hinzufügen?

改变不同的描边也不会出现文字“变瘦”的情况

Können Sie Textstriche in CSS3 hinzufügen?

SVG 文字描边

SVG 也可以实现描边效果,和 CSS 比较类似,应该说 CSS 是借鉴 SVG 的,通过 strokestroke-width

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

Der Effekt ist wie folgt

9 .png

Können Sie Textstriche in CSS3 hinzufügen?Es gibt tatsächlich einen Strich, aber der Text scheint dünner zu sein. Wenn Sie das Gefühl haben, dass er nicht offensichtlich ist, können Sie ihn vergrößern

Können Sie Textstriche in CSS3 hinzufügen?

Wie Sie hier sehen können, -webkit-text-Stroke ist eigentlich <strong> Der Strich ist zentriert und deckt den Text ab, und die Strichmethode kann nicht geändert werden</strong>. Tatsächlich ermöglichen Ihnen viele Design-Tools die Auswahl der Strichmethode, wie zum Beispiel <strong>figma</strong>

Können Sie Textstriche in CSS3 hinzufügen?

Wie erreicht man also den äußeren Stricheffekt? Können Sie Textstriche in CSS3 hinzufügen?

Es ist auch möglich! Verwenden Sie einfach zwei Textebenen, eine Textstrichebene und eine Textverlaufsebene. Um Beschriftungen zu speichern, können Sie Pseudoelemente verwenden, um

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
}
::before zu generieren. Oben befindet sich der Originaltext. Achten Sie darauf, den -webkit-text-Stroke von ::before zu entfernen. rrreee

Die Überlagerung ist wie folgt 🎜🎜Können Sie Textstriche in CSS3 hinzufügen?🎜🎜Nr Text wird angezeigt, wenn Sie verschiedene Striche ändern. Situation „Verdünnung“🎜🎜 png" alt="Können Sie Textstriche in CSS3 hinzufügen?" />🎜

SVG-Textstrich🎜🎜SVG kann auch einen Stricheffekt erzielen, der CSS ähnelt. Es sollte gesagt werden, dass CSS zeichnet auf SVG, durch Stroke Verwenden Sie Stroke-Width, um die Strichfarbe und -größe zu steuern. Beispielsweise kann 🎜rrreee🎜 diesen Effekt erzielen🎜🎜🎜🎜🎜 verhält sich genauso wie CSS ist ein zentrierter Strich und kann nicht geändert werden. 🎜🎜Der Unterschied besteht darin, dass die SVG-Steuerung flexibler ist. 🎜Die Standardeinstellung besteht darin, zuerst zu füllen und dann zu streichen. Es sieht also so aus, als ob der Strich über der Füllung liegt erneut, und die gefüllte Farbe bedeckt den Strich. Das Ändern dieser Regel in SVG kann über 🎜Paint-Order🎜 festgelegt werden. 🎜rrreee🎜Dadurch wird der äußere Stricheffekt erzielt. Ist es nicht viel praktischer als CSS? 🎜🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonKönnen Sie Textstriche in CSS3 hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn