HTML/CSS-Frontend-Implementierung der Beispielfreigabe für Textrahmen-Schatteneffekte

Die Verwendung von Schatteneffekten ist in der Entwicklung immer weiter verbreitet, daher werden wir heute über die Verwendung derselben Technik sprechen, um Randschatten zu erzielen. Im Folgenden stellt Ihnen der Herausgeber von Script House das HTML/CSS-Frontend vor, mit dem Sie den Textrand-Schatteneffekt realisieren können. Ich hoffe, es kann Ihnen helfen.

1. Randschatten

box-shadow Randschatten

Parameter: Parameter 1 x-shadow: Legen Sie den horizontalen Versatzwert des Schattens des Objekts fest, die Einheit kann px sein , em Oder Prozentsatz usw., negative Werte sind zulässig. Parameter 2 y-shadow: Legen Sie den vertikalen Versatzwert des Objektschattens fest. Die Einheit kann px, em oder Prozentsatz usw. sein. Negative Werte sind zulässig. Parameter 3 Unschärfe: Wird verwendet, um die Größe des Randschattenradius festzulegen. Parameter 4 Ausbreitung: Radius erweitern, die Größe des Schattens festlegen; dieser Parameter ist optional und der Standardwert ist 0. Parameter 5 Farbe: Legen Sie die Farbe des Schattens fest. Parameter 6 Einschub: Dieser Parameter ist standardmäßig nicht festgelegt. Der Standardwert ist äußerer Schatten, Einschub bedeutet innerer Schatten.

Box-Shadow: X-Shadow-Y-Shadow-Spread-Farbeinsatz;

2. Beispiel

Effekt 1

Effekt 2

Wie erreichen wir den Effekt im obigen Bild?

HTML-Struktur CSS-Stil Schriftstil Schriftfarbe Randschatten Nehmen wir ein Hier ist der spezifische Code:

HTML:

<p class="box">box-shadow</p>

CSS:

.box{
    width:300px;
    height:150px;
    background: deepskyblue;
    font:30px/150px 'Microsoft YaHei';
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin:100px auto;
    /*边框阴影*/
    /*效果1*/
    box-shadow: inset 5px 5px 20px #ccc;
    /*效果2*/
    box-shadow: inset 5px 5px 20px pink,5px 5px 20px #000;
}

Verwandte Empfehlungen:

Verwenden Sie Box-Shadow der CSS3-Methode zum Erstellen eines Randschatteneffekts mithilfe von Attributen

css3 abgerundeter Rand, Randschatten_html/css_WEB-ITnose

CSS zum Erzielen eines Randschatteneffekts_ html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonHTML/CSS-Frontend-Implementierung der Beispielfreigabe für Textrahmen-Schatteneffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!