So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)-CSS-Tutorial-php.cn

So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)

奋力向前

Freigeben： 2021-08-06 10:11:33

Original

5539 Leute haben es durchsucht

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS3 Schatteneffekte zu Text hinzufügen (detaillierte Code-Erklärung)“ habe ich Ihnen gezeigt, wie Sie mit CS3 Schatteneffekte zu Text hinzufügen. Im folgenden Artikel erfahren Sie, wie Sie mit CSS Rahmen oder Schriftverstärkungseffekte zu Text hinzufügen. Sehen wir uns gemeinsam an, wie das geht.

So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)

So fügen Sie mit CSS Rahmen oder Schriftvergrößerungen zu Text hinzu

Textrahmen

p{ border:2px solid blue;｝

Nach dem Login kopieren

Beispiel für einen Textrahmencode

<meta charset="utf-8"> 
<title>文字边框</title>
<style>
p{ border:2px solid blue;｝
</style>
</head>

<body>
<p>中文网1</p>
<p>中文网2</p>
<p>中文网3</p>
</body>

</html>

Nach dem Login kopieren

Code-Renderings

Schriftvergrößerung

Wählen Sie alle -Elemente über den Elementnamen p aus ="https://img.php.cn/upload/image/959/246/516/1628152068872557.jpg" title="1628152068872557.jpg" alt="So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)"/>元素

p{}

Nach dem Login kopieren

p指定样式规则

p {font-size:200%;} 将字体放大1倍

Nach dem Login kopieren

字体放大代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文字边框</title>
<style>
	p{font-size: 200%;}
p.one 
{
	border-style:dashed;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
p.four
	{border-style:dashed;
	border-width:2px;
	border-color:red
</style>
</head>

<body>
<p class="one">php中文网</p>
<p class="two">php中文网</p>
<p class="three">php中文网</p>
<p class="four">php中文网</p>
</body>

</html>

Nach dem Login kopieren

字体放大代码效果图

如果想让所有的段落拥有灰色背景，使用元素选择器

Wenn Sie möchten, lassen Sie alle Absätze einen grauen Hintergrund haben, verwenden Sie den Elementselektor , um

p{background:lightgray;} 选中所有的<p>设置背景色：亮灰色。

Nach dem Login kopieren

Codebeispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文字边框</title>
<style>
	p{background:lightgray; font-size: 200%;}
p.one 
{
	border-style:dashed;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
p.four
	{border-style:dashed;
	border-width:2px;
	border-color:red
</style>
</head>

<body>
<p class="one">php中文网</p>
<p class="two">php中文网</p>
<p class="three">php中文网</p>
<p class="four">php中文网</p>
</body>

</html>

Nach dem Login kopieren

Code-Renderings

Empfohlenes Lernen: CSS-Video-Tutorial

🎜 zu definieren

Das obige ist der detaillierte Inhalt vonSo fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!