Eine kurze Einführung in Schatten-, Hintergrund- und abgerundete Rahmenstile in CSS3

CSS2.1 wird seit 7 Jahren veröffentlicht. Das Aufkommen von CSS3 besteht darin, die Funktionen von CSS2.1 zu verbessern, die Verwendung von Bildern zu reduzieren und Spezialeffekte auf HTML-Seiten zu lösen

Zu den derzeit am besten für den Einsatz in der mobilen Webentwicklung geeigneten Funktionen der CSS3-Technologie gehören:

●Erweiterte Auswahl

●Schatten

●Leistungsstarke Hintergrundeinstellungen

●Abgerundeter Rand

Schatten:

Der Der aktuelle CSS3-Stil unterstützt bereits Schatteneffekte. Derzeit sind zwei Arten von Schatteneffekten verfügbar: Schatteneffekte für Textinhalte und Schatteneffekte für Elemente.

box-shadow

Das box-shadow-Attribut von CSS3 verleiht dem Element einen Schatteneffekt. Seine Syntax lautet wie folgt:

   box-shadow:<length> <length> <length> | color:

wobei die erste Länge ist Schattenpegel-Versatzwert; der zweite Längenwert ist der vertikale Schattenversatzwert; der dritte Wert ist der Schattenunschärfewert. Die horizontalen und vertikalen Versatzwerte können positive und negative Werte annehmen, z. B. 4px oder -4px.

Derzeit wird Box-Shadow von den meisten modernen Browsern unterstützt. Wenn wir dieses Attribut jedoch in Webkit-basierten Browsern wie Chrome und Safari verwenden, müssen wir den Namen des Attributs in der Form -webkit-box-shadow schreiben. Für den Firefox-Browser sollte es in der Form -moz-box-shadow geschrieben werden.

Der folgende Code ist ein einfaches Beispiel für die Verwendung von box-shadow, das mit den Browsern Chrome, Safari und Firefox kompatibel ist:

<style type="text/css">
        p
        {
            /* 其他浏览器 */
            box-shadow: 3px 4px 2px #000;
            /* webkit内核浏览器 */
            -webkit-box-shadow: 3px 4px 2px #000; 
            /* Firefox浏览器 */
            -moz-box-shadow: 3px 4px 2px #000;
            padding:5px 4px;
        }
    </style>

text-shadow

text- Schattenattribut Wird zum Festlegen des Schatteneffekts oder Unschärfeeffekts von Textinhalten verwendet.

Derzeit wird das Textschatten-Attribut von den Browsern Safari, Firefox, Chrome und Opera unterstützt. Browser unter IE8 unterstützen diese Funktion nicht. Und die meisten mobilen Webbrowser werden gut unterstützt.

Die Syntax von text-shadow ist im Grunde die gleiche wie die von box-shadow:

box-shadow: >

Der folgende Code ist ein einfaches und praktisches Beispiel für Textschatten:

 <style type="text/css">
        p
        {
            text-shadow: 5px -10px 5px red;
            color:#666;
            font-size:16px;
        }
    </style>

Hintergrund

In der CSS3-Spezifikation fügt CSS3 dem Hintergrund viele neue Funktionen hinzu Attribut. Es unterstützt sowohl den Anzeigebereich des Hintergrunds als auch mehrere Bildhintergründe. Das Wichtigste ist, dass über Attributeinstellungen Farbverläufe oder beliebige Farbeffekte für die Hintergrundfarbe festgelegt werden können, was sehr vielseitig ist.

CSS3 erweitert das Hintergrundattribut. In der Vergangenheit haben wir Bilder verwendet, um verschiedene Seitenänderungen zu ersetzen, und nach und nach können sie durch das Hintergrundattribut ersetzt werden. Diese Funktionen verbessern die Seitenladegeschwindigkeit, insbesondere auf Mobilgeräteplattformen, und verbessern die Seitenleistung.

Hintergrundgröße

Das Attribut „Hintergrundgröße“ wird verwendet, um die Größe des Hintergrundbilds festzulegen.

Dieses Attribut wird derzeit von den Browsern Chrome, Safair und Opera unterstützt. Es unterstützt auch Webbrowser auf Android- und IOS-Plattformen.

Das Attribut „Hintergrundgröße“ weist in verschiedenen Webbrowsern bestimmte Syntaxunterschiede auf. In den Browsern Chrome und Safari, die auf dem Webkite-Kernel basieren, lautet die Schreibmethode -webkit-background-size;

In mobilen Entwicklungsprojekten wird empfohlen, die Schreibmethode im Kompatibilitätsmodus zu verwenden. Das Beispiel lautet wie folgt :

 <style type="text/css">
        p
        {
            background-size:10px 5px;
            -webkit-backgriud-size:10px 5px;
        }
    </style>

Hintergrund

Das Hintergrundattribut erhält in CSS3 eine sehr mächtige Funktion. Eines der sehr wichtigen Features sind mehrere Hintergründe. In der Vergangenheit konnte nur ein Bild verwendet werden, aber mehrere Hintergrundbilder können in CSS3 mit der folgenden Syntax festgelegt werden:

  background:url(bg.jpg) left top no-repeat,
                             url(bg2.jpg) left top no-repeat;

Sowohl Chrome- als auch Safari-Browser unterstützen mehrere Hintergrundbilder mit dem Hintergrundattribut. Da es sich um Webkit-basierte Browser handelt, wird diese Funktion auch von mobilen Browsern auf Android- und IOS-Plattformen unterstützt. Da das Festlegen des Hintergrunds mithilfe von Bildern jedoch das Gesamterlebnis und die Leistung des mobilen Webs erheblich beeinträchtigen wird, verwenden wir eine Funktion in Webkit, um anstelle von Bildern einen Farbverlauf für den Hintergrund zu verwenden. Die Syntax lautet wie folgt:

      -webkit-gradient(<type>, <type> [,<radius> ]?,<point> [, <radius> ]? [, <stop> ]*)

Der Typtyp bezieht sich auf den Gradiententyp, z. B. linearer Gradient linear oder radialer Gradient radial. Der folgende Code:

<style type="text/css">
        p
        {
            background: -webkit-gradient(linear,0 0,0 100%,form(#ff),to(#000));
        }
</style>

Abgerundeter Rand

Der Effekt abgerundeter Ecken kann problemlos in CSS3 erreicht werden. Sie können den Effekt abgerundeter Ecken erzielen, solange Sie das Attribut border-radius definieren der Code.

Bisher wurde dieses Attribut von den Browsern Chrome, Safari, Opera und Firefox unterstützt. Es gibt jedoch einige Unterschiede in den Schreibmethoden zwischen den Browsern: Chrome- und Safari-Browser müssen -webkit-border-radius schreiben; der kompatible Beispielcode lautet wie folgt: 🎜>

Es ist zu beachten, dass das Attribut border-radius keine negativen Werte verwenden darf. Wenn einer davon 0 ist, ist die dem Wert entsprechende Ecke ein Rechteck, andernfalls handelt es sich um eine abgerundete Ecke.

<style type="text/css">
        p
        {
             border-radius:10px 5px;
             /* Firefox浏览器 */
             -moz-border-radius:10px 5px;
             /* webkit 内核浏览器 */
             -webkit-border-radius:10px 5px;
        }
    </style>

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in Schatten-, Hintergrund- und abgerundete Rahmenstile in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!