Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Randeffekte zu HTML-Schriftarten hinzufügen (Code-Sharing)

Im vorherigen Artikel „So erzielen Sie einen Zentrierungseffekt in einer HTML-Webseite (Code-Sharing)“ habe ich Ihnen vorgestellt, wie Sie die gesamte Webseite zentrieren. Im folgenden Artikel erfahren Sie, wie Sie mithilfe von CSS Randeffekte zu HTML-Elementschriftarten hinzufügen. Sehen wir uns an, wie das gemeinsam geht.

Fügen Sie mithilfe des border-Attributs einen Rahmen zum HTML-Element hinzu.

border-Kurzschrifteigenschaft legt alle Grenzeigenschaften in einer Deklaration fest.

Drei Elemente des Rahmenattributs

• border-width Der Standardwert ist 1pxborder-width 默认是 1px

• border-style 边框样式

• border-color 默认是黑色

border-style设置边框的样式可选

代码示例

<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>

代码效果

方法步骤

1、设置div标签的class属性为mydiv

<div class="mydiv">随意写文字</div>

1、<style type="text/css"></style>标签，页面的css样式。

<style type="text/css">...</style>

2、mydiv的div进行样式设置，使用width和height属性设置div的宽度为85px和高度为20px。

.mydiv{
	width: 85px;
	height: 20px;
	}

3、四个边框都设置成为1px实现灰色边框的方法。

1、border-left属性设置div的左边框；

2、border-right属性设置div的右边框；

3、border-top属性设置div的上边框；

4、border-bottom

border-style border style

border-color Der Standardwert ist Schwarz

border-style Das Festlegen des Rahmenstils ist optionalCodebeispiel

border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc

🎜Codeeffekt 🎜🎜 🎜🎜Methode Schritte🎜 🎜1. Setzen Sie das Klassenattribut des div-Tags auf mydiv🎜rrreee🎜1 <style type="text/css"></style> die Seite.
🎜rrreee🎜2. Legen Sie den Stil des Div von mydiv fest. Verwenden Sie die Attribute width und height, um die Breite des Div auf 85 Pixel und die Höhe auf 20 Pixel festzulegen. 🎜rrreee🎜3. Stellen Sie alle vier Ränder auf 1 Pixel ein, um graue Ränder zu erhalten. 🎜🎜1. Das Attribut border-left legt den linken Rand des div fest; 3. border legt den oberen Rand des Div fest. 🎜🎜4 Das Attribut border-bottom legt den unteren Rand des Div fest. 🎜rrreee🎜Codeeffekt🎜🎜🎜🎜🎜Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Randeffekte zu HTML-Schriftarten hinzufügen (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!