So zeichnen Sie spezielle Grafiken in CSS

So zeichnen Sie spezielle Grafiken in CSS

1. Dreieck

Rahmeneinstellungen

Code:

Breite: 300px;
Höhe: 300px;
Hintergrund: rot;
Rand: 40px tief schwarz;
Rahmenfarbe links: blau;
Farbe des unteren Rahmens: gelb;
Rahmenfarbe rechts: rosa;
Rahmenoberseite-Farbe: #008800;

Beim Zeichnen spezieller Grafiken müssen Sie die Breite und Höhe auf 0 setzen

Wirkung:

Code:

Breite: 0;
Höhe: 0;
Hintergrund: transparent;
Rand: 40px tief schwarz;
Rahmenfarbe links: blau;
Farbe des unteren Rahmens: gelb;
Rahmenfarbe rechts: rosa;
Rahmenoberseite-Farbe: #008800;

1. Gleichschenkliges Dreieck: Stellen Sie die Ränder der anderen Seiten auf transparent

Code:

Breite: 0;
Höhe: 0;
Hintergrund: transparent;
Rand: 40px tief schwarz;
Rahmenfarbe links: transparent;
Farbe des unteren Rahmens: gelb;
Rahmenfarbe rechts: transparent;
Farbe des oberen Rahmens: transparent;

2. Rechtwinkliges Dreieck

Code: Schreiben Sie zuerst ein vollständiges div und verwenden Sie dann border-***-width: 0;, um das Dreieck abzufangen

border-top-width/border-bottom-width:0=》ist es horizontal in der Mitte zu teilen und die obere oder untere

border-left-width/border-right-width:0=》ist es vertikal in der Mitte zu teilen, wobei die linke oder rechte Seite erhalten bleibt

.rechterWinkel{
    Breite: 0;
    Höhe: 0;
    Hintergrund: transparent;
    Rand: 40px tief schwarz;
    Rahmenfarbe links: blau;
    Farbe des unteren Rahmens: gelb;
    Rahmenfarbe rechts: rosa;
    Rahmenoberseite-Farbe: #008800;
    Obere Rahmenbreite: 0;
    Rahmenbreite links: 0;
    Rahmenfarbe rechts: transparent;
}

3. Trapez

Ribbon-Grafiken:

Code:

Breite: 300px;
Höhe: 0;
Hintergrund: transparent;
Rand: 40px durchgezogen #008800;
Rahmenfarbe links: transparent;
Farbe der unteren Umrandung: gelb;
Rahmenfarbe rechts: transparent;
Rahmenoberseite-Farbe: #008800;

Trapez:

Code: Reduzieren Sie die Breite der Ribbon-Grafik oben und setzen Sie dann das Trapez oben auf transparent

Breite: 100px;
Höhe: 0;
Hintergrund: transparent;
Rand: 40px durchgezogen #008800;
Rahmenfarbe links: transparent;
Rahmenunterseite-Farbe: #008800;
Rahmenfarbe rechts: transparent;
Farbe des oberen Rahmens: transparent;

Zusammenfassung: Durch Einstellen der Länge und Höhe sowie der Transparenz des Rahmens können Sie die gewünschte Grafik zusammenstellen. 4. Kreis

4. Grafik:

Code: Verwenden Sie border-radius:50%;

.Kreis{
    Breite: 100px;
    Höhe: 100px;
    Rand: 0;
    Randradius: 50 %;
    Hintergrundfarbe: orange;
}

5. Ellipse

Grafik:

Code:

.Ellipse{
    Breite: 200px;
    Höhe: 120px;
    Hintergrundfarbe: orange;
    Rahmen oben links-Radius: 50 %;
    Rahmen oben rechts – Radius: 50 %;
    Rahmen unten links – Radius: 50 %;
    Rahmen unten rechts – Radius: 50 %;
}

Zusammenfassen:

Ein display:block-Element wird nach dem Festlegen seiner Breite und Höhe als Rechteck angezeigt. Durch Festlegen des Rahmenradius können Sie abgerundete Rechtecke, Kreise und Ellipsen erhalten.

Bei der Verwendung von Border-Radius müssen Sie einige Punkte beachten:

  • Der Randradius kann für die vier Ecken separat eingestellt werden. Beispielsweise im Bild oben: border-top-left-radius: apx bpx;
  • Die beiden Werte von border-xxx-xxx-radius stellen jeweils die Hälfte der Länge der Hauptachse und der Nebenachse der Ellipse dar. Normalerweise bedeutet eine Abkürzung, z. B. border-top-left-radius: 10px;(border-top-left-radius:10px 10px;), dass die Länge der Hauptachse und der Nebenachse beide 20px beträgt, also ein Kreis mit einem Radius von 10px (der abgerundete Teil).
  • Bei der Verwendung von Prozentwerten ist a relativ zur Breite und b relativ zur Höhe 6. Spezielle Grafiken

(1) Hypothenuse-Dreieck

Grafik:

Code: Erst ein gleichseitiges Dreieck zeichnen, dann den Winkel umrechnen

.beveledTriangle{
    Rand: 50px;
    Breite: 0;
    Höhe: 0;
    Rand: 20px durchgezogen #2b81af;
    Obere Rahmenbreite: 40px;
    Rahmenoberseite-Farbe: transparent;
    Breite des unteren Rahmens: 40px;
    Farbe des unteren Rahmens: transparent;
    Rahmenbreite links: 0;
    Rahmenfarbe rechts: #008800;
    Rahmenbreite rechts: 25px;
    Transform-Origin:Mitte Mitte;
    transformieren:Y drehen(-180 Grad) drehen(-44 Grad);
}

(2) Zeichne einen „kleinen Schwanz“

Grafik:

Code:

.Schwanz{
    Rand: 50px;
    Breite: 100px;
    Höhe: 70px;
    Rahmen oben rechts – Radius: 70px 70px;
    Rahmen rechts: 6px durchgezogen #000000;
}

Zusammenfassung: Wenn Sie den Stil „Abgerundete Ecken“ auf eine Ecke anwenden und von den beiden angrenzenden Kanten dieser Ecke einer definiert und einer undefiniert ist , ist das Zeichenergebnis ein „kleiner Schwanz“ mit einem Übergang von dick zu dünn.

7. Zeichnen Sie das QQ-Muster (aus dem AlloyTeam-Fall)

Grafik:

Code:

<a id="qq" href="http://www.alloyteam.com" target="_blank">
    <div Klasse='Kopf'>
        <div Klasse='linkes Auge'>
            <div Klasse="innerLeftEye">
            </div>
        </div>
        <div Klasse='rechtes Auge'>
            <div Klasse="innerRightEye">
                <div Klasse="fix"></div>
            </div>
        </div>
        <div Klasse='mouthTopContainer'>
            <div Klasse = 'MundOberteil'></div>
        </div>
        <div Klasse="MundBodenContainer">
            <div Klasse="MundBoden"></div>
        </div>
        <div Klasse="LippenContainer">
            <div Klasse="Lippen">
                <div Klasse="Lippenschatten links">
                </div>
                <div Klasse="Lippenschatten rechts">
                </div>
            </div>
        </div>
    </div>
    <div Klasse="Körper">
        <div Klasse="innerWrapper">
            <div Klasse="inner">
            </div>
        </div>
        <div Klasse="outterWrapper">
            <div Klasse = "outter">
            </div>
        </div>
        <div Klasse="Schal">
            <div Klasse="SchalSchatten">
            </div>
            <div Klasse="SchalShadowRight">
            </div>
        </div>
        <div Klasse="SchalEnde">
            <div Klasse="scarfEndShadow">
            </div>
        </div>
    </div>
    <div Klasse="handWrapper">
        <div Klasse="leftHandTopContainer">
            <div Klasse="leftHandTop">
            </div>
        </div>
        <div Klasse="leftHandBottomContainer">
            <div Klasse="leftHandBottom">
            </div>
        </div>
        <div Klasse="rightHandTopContainer">
            <div Klasse="RechtsOberteil">
            </div>
        </div>
        <div Klasse="rightHandBottomContainer">
            <div Klasse="rightHandBottom">
            </div>
        </div>
    </div>
    <div Klasse='footWrapper'>
        <div Klasse="leftFootTopWrapper">
            <div Klasse="leftFootTop">

            </div>
        </div>
        <div Klasse="leftFootBottomWrapper">
            <div Klasse="leftFootBottom">
            </div>
        </div>
        <div Klasse = 'Zehe links'></div>
        <div Klasse="rightFootTopWrapper">
            <div Klasse="rechterFußOberteil">
            </div>
        </div>
        <div Klasse="rightFootBottomWrapper">
            <div Klasse="rightFootBottom">
            </div>
        </div>
        <div Klasse = 'Zehe rechts'></div>
    </div>
</a>

<Stil>
    Körper{
        Rand: 0;
        Polsterung: 0;
        Schriftart: 12px Tahoma, Arial, serifenlos;
    }
    #Maske {
        Position: absolut;
        Deckkraft: 0,2;
        oben: 0;
        links: 0;
    }

    Überschrift{
        Schriftfamilie: „Segoe UI Light“, „Segoe UI“, „Microsoft Jhenghei“, „寰?蒋板呴粦“, serifenlos;
        Farbe: #666;
        Schriftgröße: 50px;
        Textausrichtung: zentriert;
        Rand oben: 50px;
    }

    .Team {
        Schriftgröße: 0,6em;
    }

    .team a{
        Farbe: #5FB7E9;
        Textdekoration: keine;
    }

    .team a:hover{
        Farbe: #4B9BC9;
    }
    /**
     * LOGO
     */

    #qq {
        Breite: 420px;
        Höhe: 400px;
        Rand: 0 automatisch;
        Rand oben: 30px;
        Position: relativ;
        Anzeige:Block;
    }

    .Kopf{
        Position: absolut;
        oben: 18px;
        links: 96px;
        Breite: 234px;
        Höhe: 185px;
        Rand: 1px durchgezogen #000;
        Rahmen oben links – Radius: 117px 117px;
        Rahmen oben rechts – Radius: 117px 117px;
        Rahmen unten links – Radius: 117px 68px;
        Rahmen unten rechts, Radius: 117px 68px;
        z-Index: 10;
        Hintergrund: #000;
    }

    .Auge{
        Breite: 44px;
        Höhe: 66px;
        Rand: 1px durchgezogen #000;
        Randradius: 50 % 50 %;
        Position: absolut;
        Hintergrund: #fff;
    }

    .linkes.Auge{
        links: 62px;
        oben: 50px;
    }

    .rechtes.Auge{
        links: 123px;
        oben: 50px;
    }

    .innerLeftEye{
        Position: absolut;
        oben: 20px;
        links: 20px;
        Breite: 18px;
        Höhe: 24px;
        Randradius: 50 %;
        Rand: 1px durchgezogen #000;
        Hintergrund: #000;
    }

    .innerLeftEye:nach{
        Inhalt: "";
        Position: absolut;
        Breite: 6px;
        Höhe: 8px;
        Hintergrund: weiß;
        Z-Index: 11;
        oben: 6px;
        links: 9px;
        Randradius: 50 %;
    }

    .innerRightEye{
        Position: absolut;
        Breite: 18px;
        Höhe: 20px;
        oben: 20px;
        links: 8px;
        Rahmen oben links – Radius: 50 % 90 %;
        Rahmen oben rechts – Radius: 50 % 90 %;
        Rahmen unten links – Radius: 50 % 10 %;
        Rahmen unten rechts – Radius: 50 % 10 %;
        Hintergrund: schwarz;
        Box-Schatten: 0 -1px 2px schwarz;
    }

    .innerRightEye:nach{
        Inhalt: "";
        Position: absolut;
        Breite: 10px;
        Höhe: 13px;
        unten: -1px;
        links: 4px;
        Rahmen oben links – Radius: 50 % 100 %;
        Rahmen oben rechts – Radius: 35 % 80 %;
        Hintergrund: weiß;
    }

    .fix {
        Position: absolut;
        Breite: 4px;
        Höhe: 4px;
        Randradius: 50 %;
        Hintergrund: schwarz;
        oben: 17px;
    }

    .fix:nach{
        Inhalt: "";
        Position: absolut;
        Breite: 4px;
        Höhe: 4px;
        Randradius: 50 %;
        Hintergrund: schwarz;
        oben: 0;
        links: 14px;
    }

    .mouthTopContainer {
        Position: absolut;
        Breite: 158px;
        Höhe: 29px;
        Z-Index: 1;
        oben: 120px;
        links: 39px;
        Überlauf: versteckt;
    }
    .MundOberteil{
        Breite: 158px;
        Höhe: 34px;
        Position: absolut;
        Z-Index: 1;
        Rand: 1px durchgezogen #FFA600;
        Hintergrund: #FFA600;
        oben: 0;
        links: 0;
        Rahmen oben links – Radius: 45 % 34px;
        Rahmen oben rechts – Radius: 45 % 34px;
        /*Hintergrundfarbe: #FFA600; */
    }

    .mouthBottomContainer {
        Position: absolut;
        Breite: 158px;
        Höhe: 15px;
        Z-Index: 1;
        oben: 146px;
        links: 39px;
        Überlauf: versteckt;
    }
    .mouthBottom{
        Breite: 158px;
        Höhe: 24px;
        Position: absolut;
        Z-Index: 1;
        Rand: 1px durchgezogen #FFA600;
        Hintergrund: #FFA600;
        Rahmen oben: keine;
        oben: -4px;
        links: 0;
        Rahmen unten links – Radius: 45 % 24px;
        Rahmen unten rechts – Radius: 45 % 24px;
        Hintergrundfarbe: #FFA600;
    }

    .Lippen{
        Rand: 1px durchgezogen #FFA600;
        Hintergrund: #FFA600;
        Breite: 116px;
        Höhe: 24px;
        Position: absolut;
        oben: 146px;
        links: 60px;
        oberer Rand: keiner;
        Rahmen unten links – Radius: 50 % 100 %;
        Rahmen unten rechts – Radius: 50 % 100 %;
    }

    .lipShadow {
        Breite: 0px;
        Höhe: 0px;
        Position: absolut;
        Z-Index: 2;
        Rahmen oben: 20px durchgehend transparent;
        Rahmen unten: 20px durchgehend transparent;
        Rahmen rechts: 8px tief schwarz;
        -webkit-transform-origin: oben rechts;
        -webkit-transform: drehen(-60 Grad);
        -moz-transform-origin: oben rechts;
        -moz-transform:drehen(-60Grad);
        -o-transform-origin: oben rechts;
        -o-transform: drehen (-60 Grad);
        Transform-Origin: oben rechts;
        transformieren: drehen (-60 Grad);
        links: -12px;
        oben: 4px;
    }

    .lipShadow.right{
        links: 114px;
        -webkit-transform: Drehen (60 Grad) Drehen Y (180 Grad);
        -moz-transform: drehen (60 Grad) drehen Y (180 Grad);
        -o-transform: drehen(60 Grad) drehenY(180 Grad);
        transformieren: drehen (60 Grad) drehen Y (180 Grad);
    }

    .Körper{
        Breite: 326px;
        Höhe: 300px;
        /*Rand: 1px durchgehend schwarz;*/
        oben: 135px;
        links: 48px;
        Position: absolut;
    }

    .Schal {
        Rand: 4px durchgezogen #000;
        Position: absolut;
        Hintergrund: #FB0009;
        Z-Index: 5;
        Breite: 258px;
        Höhe: 110px;
        oben: -2px;
        links: 34px;
        Rahmen oben links – Radius: 30px 34px;
        Rahmen oben rechts, Radius: 38px 34px;
        Rahmen unten links – Radius: 50 % 76 Pixel;
        Rahmen unten rechts – Radius: 50 % 76 Pixel;
        oberer Rand: keiner;
    }

    .SchalSchatten {
        Position: absolut;
        Rahmen oben: 6px durchgezogen #000;
        Breite: 60px;
        Höhe: 70px;
        oben: 0px;
        links: 6px;
        Rahmen oben links – Radius: 90px 120px;
        Rahmen oben rechts – Radius: 30px 30px;
        -webkit-transform: drehen(-79 Grad);
        -moz-transform:drehen(-79Grad);
        -o-transform: drehen(-79 Grad);
        transformieren: drehen (-79 Grad);
    }

    .scarfShadowRight {
        Position: absolut;
        Rahmen rechts: 6px tief schwarz;
        Breite: 100px;
        Höhe: 70px;
        oben: 8px;
        links: 143px;
        Rahmen unten rechts – Radius: 70px 70px;
        Z-Index: 6;
    }

    .SchalEnde{
        Position: absolut;
        Breite: 52px;
        Höhe: 64px;
        Z-Index: 4;
        oben: 90px;
        Rand: 3px tief schwarz;
        links: 74px;
        Rahmen unten links – Radius: 50 % 43 %;
        Rahmen unten rechts – Radius: 15px;
        Rahmen oben links – Radius: 20 % 57 %;
        Hintergrund: #FB0009;
    }

    .scarfEndShadow{
        Position: absolut;
        Rahmen oben: 6px tief schwarz;
        Breite: 20px;
        Höhe: 20px;
        oben: 6px;
        links: 12px;
        Rahmen oben links – Radius: 30px 30px;
        -webkit-transform-origin: oben rechts;
        -moz-transform-origin: oben rechts;
        -o-transform-origin: oben rechts;
        Transform-Origin: oben rechts;
        Z-Index: 10;
        -webkit-transform: schrägX(4 Grad) skalierenY(1,5) drehen(-60 Grad);
        -moz-transform: schrägX(4 Grad) skalierenY(1,5) drehen(-60 Grad);
        -o-transform: schrägX(4 Grad) skalierenY(1,5) drehen(-60 Grad);
        Transformieren: X neigen (4 Grad) Y skalieren (1,5) drehen (-60 Grad);

    }

    .innerWrapper{
        Position: absolut;
        Überlauf: versteckt;
        Breite: 280px;
        Höhe: 200px;
        links: 30px;
        oben: 76px;
    }

    .inner {
        Rand: 1px durchgezogen #000;
        Breite: 218px;
        Position: absolut;
        Höhe: 210px;
        Randradius: 50 %;
        links: 25px;
        oben: -71px;
        Z-Index: 4;
        Hintergrund: #fff;
    }

    .outterWrapper{
        Breite: 262px;
        links: 32px;
        Höhe: 250px;
        Position: absolut;
        oben: 54px;
        Überlauf: versteckt;
    }

    .outter{
        Rand: 1px durchgezogen #000;
        Breite: 260px;
        Höhe: 250px;
        Rahmenradius: 125px;
        Position: absolut;
        oben: -84px;
        Z-Index: 3;
        Hintergrund: #000;
    }

    .handWrapper{
        Position: absolut;
        oben: 219px;
        links: 7px;
    }


    .leftHandTopContainer{
        Breite: 118px;
        Höhe: 26px;
        Position: absolut;
        Z-Index: 1;
        oben: 55px;
        links: 50px;
        -webkit-transform-origin: unten links;
        -webkit-transform: drehen(-70 Grad);
        -moz-transform-origin: unten links;
        -moz-transform:drehen(-70Grad);
        -o-transform-origin: unten links;
        -o-transform: drehen(-70 Grad);
        Transform-Origin: unten links;
        transformieren: drehen (-70 Grad);
        Überlauf: versteckt;
    }

    .leftHandTop{
        Breite: 128px;
        Höhe: 54px;
        Rand: 1px durchgezogen #050346;
        Position: absolut;
        Rahmen oben links – Radius: 44 % 38px;
        Rahmen oben rechts – Radius: 56 % 33px;
        Hintergrund: #000;
    }

    .leftHandBottomContainer {
        Breite: 100px;
        Höhe: 30px;
        Position: absolut;
        Z-Index: 1;
        oben: 78px;
        links: 50px;
        -webkit-transform-origin: oben links;
        -webkit-transform: drehen(-70 Grad);
        -moz-transform-origin: oben links;
        -moz-transform:drehen(-70Grad);
        -o-transform-origin: oben links;
        -o-transform: drehen(-70 Grad);
        Transform-Origin: oben links;
        transformieren: drehen (-70 Grad);
        Überlauf: versteckt;
    }

    .leftHandBottom{
        Breite: 128px;
        Höhe: 44px;
        Rand: 1px durchgezogen #050346;
        Hintergrund: #000;
        oberer Rand: keiner;
        Position: absolut;
        Rahmen unten links – Radius: 48 % 20px;
        Rahmen unten rechts – Radius: 52 % 23px;
        oben: -26px;
    }


    .rightHandTopContainer{
        Breite: 118px;
        Höhe: 34px;
        Position: absolut;
        Z-Index: 3;
        oben: 47px;
        links: 240px;
        -webkit-transform-origin: unten rechts;
        -webkit-transform: drehen (65 Grad);
        -moz-transform-origin: unten rechts;
        -moz-transform:drehen(65Grad);
        -o-transform-origin: unten rechts;
        -o-transform: drehen(65 Grad);
        Transform-Origin: unten rechts;
        transformieren: drehen (65 Grad);
        Überlauf: versteckt;
    }

    .rightHandTop{
        Breite: 148px;
        Höhe: 54px;
        Rand: 1px durchgezogen #050346;
        Position: absolut;
        Rahmen oben rechts – Radius: 41 % 54 Pixel;
        Rahmen oben links – Radius: 59 % 48 Pixel;
        Hintergrund: schwarz;
        links: -30px;
        -webkit-transform:rotateY(-180 Grad);
        -moz-transform:rotateY(-180 Grad);
        -o-transform: dreheY(-180 Grad);
        transformieren: Y-Drehung (-180 Grad);
    }

    .rightHandBottomContainer{
        Breite: 110px;
        Höhe: 58px;
        Position: absolut;
        Z-Index: 1;
        oben: 81px;
        links: 248px;
        -webkit-transform-origin: oben rechts;
        -webkit-transform: drehen(90 Grad);
        -moz-transform-origin: oben rechts;
        -moz-transform:drehen(90°);
        -o-transform-origin: oben rechts;
        -o-transform: drehen (90 Grad);
        Transform-Origin: oben rechts;
        transformieren: drehen (90 Grad);
        Überlauf: versteckt;
    }

    .rightHandBottom{
        Breite: 68px;
        Höhe: 28px;
        Rand: 1px durchgezogen #000;
        Hintergrund: schwarz;
        oberer Rand: keiner;
        Position: absolut;
        oben: 1px;
        links: 38px;
        Rahmen unten rechts – Radius: 100 % 40px;
        Z-Index: 999;
    }

    .footWrapper{
        Position: absolut;
        oben: 292px;
        links: 80px;
    }

    .leftFootTopWrapper {
        Position: absolut;
        Breite: 130px;
        oben: 16px;
        links: -1px;
        Höhe: 37px;
        Überlauf: versteckt;
        Z-Index: 2;
    }

    .leftFootTop{
        Position: absolut;
        Breite: 120px;
        Höhe: 60px;
        Rand: 4px tief schwarz;
        Hintergrund: #FF9C00;
        Rahmen oben links-Radius: 80 % 70 %;
        oben: -10px;
        links: 3px;
    }

    .zehe {
        Position: absolut;
        Rahmen oben: 4px tiefschwarz;
        Breite: 25px;
        Höhe: 20px;
        oben: 50px;
        links: 2px;
        Rahmen oben rechts – Radius: 30px 30px;
        Rahmen oben links – Radius: 10px 10px;
        -webkit-transform-origin: oben links;
        -moz-transform-origin: oben links;
        -o-transform-origin: oben links;
        Transform-Origin: oben links;
        Z-Index: 10;
        -webkit-transform: drehen(-45 Grad);
        -moz-transform:drehen(-45Grad);
        -o-transform: drehen(-45 Grad);
        transformieren: drehen (-45 Grad);
    }

    .Zehe.rechts{
        -webkit-transform: drehen(45 Grad) drehenY(180 Grad);
        -moz-transform: drehen(45 Grad) drehenY(180 Grad);
        -o-transform: drehen(45 Grad) drehenY(180 Grad);
        transformieren: drehen(45 Grad) drehenY(180 Grad);
        links: 264px;
    }

    .leftFootBottomWrapper {
        Position: absolut;
        Breite: 130px;
        oben: 52px;
        links: -1px;
        Höhe: 38px;
        Überlauf: versteckt;
        Z-Index: 2;
    }

    .leftFootBottom{
        Position: absolut;
        Breite: 120px;
        Höhe: 60px;
        Rand: 4px durchgezogen #000;
        Hintergrund: #FF9C00;
        Rahmen oben links – Radius: 50 % 44 %;
        Rahmen oben rechts – Radius: 50 % 44 %;
        Rahmen unten links – Radius: 50 % 56 %;
        Rahmen unten rechts – Radius: 50 % 56 %;
        oben: -30px;
        links: 3px;
    }


    .rightFootTopWrapper {
        Position: absolut;
        Breite: 134px;
        oben: 22px;
        links: 134px;
        Höhe: 36px;
        Überlauf: versteckt;
        Z-Index: 2;
    }

    .rightFootTop{
        Position: absolut;
        Breite: 120px;
        Höhe: 60px;
        Rand: 4px tief schwarz;
        Hintergrund: #FF9C00;
        Rahmen oben rechts – Radius: 32 % 65 %;
        oben: 0px;
        links: 4px;
    }

    .rightFootBottomWrapper {
        Position: absolut;
        Breite: 134px;
        oben: 52px;
        links: 134px;
        Höhe: 38px;
        Überlauf: versteckt;
    }

    .rightFootBottom{
        Position: absolut;
        Breite: 120px;
        Höhe: 60px;
        Rand: 4px durchgezogen #000;
        Hintergrund: #FF9C00;
        Rahmen oben links – Radius: 50 % 56 %;
        Rahmen oben rechts – Radius: 50 % 56 %;
        Rahmen unten links – Radius: 50 % 44 %;
        Rahmen unten rechts – Radius: 50 % 44 %;
        oben: -30px;
        links: 3px;
    }

    .rechteZehe {
        Position: absolut;
        Breite: 40px;
        Höhe: 10px;
        Rand: 2px durchgezogen #000;
        Hintergrund: #FF9C00;
        Randradius: 50 %;
        -webkit-transform-origin: unten rechts;
        -webkit-transform: drehen(34 Grad);
        -moz-transform-origin: unten rechts;
        -moz-transform:drehen(34Grad);
        -o-transform-origin: unten rechts;
        -o-transform: drehen(34 Grad);
        Transform-Origin: unten rechts;
        transformieren: drehen (34 Grad);
        oben: 35px;
        links: 210px;
        Z-Index: 1;
    }

    .Copyright{
        Rand: 50px 0 0 0;
        Höhe: 50px;
        Farbe: #999;
        Schriftfamilie: Tahoma;
        Schriftgröße: 12px;
        Textausrichtung: zentriert;
    }

    .Urheberrecht ein {
        Farbe: #999;
        Textdekoration: keine;
    }

    .copyright a:hover, .copyright a:fokus {
        Gliederung: keine;
        Textdekoration: Unterstreichen;
    }
</Stil>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Abkürzung für HTML DOCTYPE

>>:  Löschen Sie den Image-Vorgang von „none“ in Docker-Images

Artikel empfehlen

Analyse des Uniapp-Einsteiger-NVUE-Klettergrubenrekords

Inhaltsverzeichnis Vorwort Hallo Welt Bild Rahmen...

Zusammenfassung der Verwendung von JavaScript JSON.stringify()

Inhaltsverzeichnis 1. Nutzung 1. Grundlegende Ver...

Einige Dinge, die Sie über den Varchar-Typ in MySQL wissen sollten

Speicherregeln für varchar In Versionen unter 4.0...

Vue implementiert die richtige Slide-Out-Layer-Animation

In diesem Artikelbeispiel wird der spezifische Co...

Eine kurze Erläuterung zum Ändern/Festlegen der Umgebungsvariable JAVA_HOME unter Linux

1. Dauerhafte Änderung, gültig für alle Benutzer ...

Beispiel für die Verwendung von JSX zur Entwicklung einer Markup-Komponente (Front-End-Komponentenbildung)

Inhaltsverzeichnis Aufbau einer JSX-Umgebung NPM ...

Lösung zum Vergessen des MySQL-Datenbankkennworts

Möglicherweise haben Sie gerade ein MySQL-Passwor...

Fünf Verzögerungsmethoden für die MySQL-Zeitblindinjektion

Fünf Verzögerungsmethoden für die MySQL-Zeitblind...

Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)

Vorwort: Weil viele Geschäftstabellen Entwurfsmus...

Implementierung einer MySQL-Sicherungsstrategie (vollständige Sicherung + inkrementelle Sicherung)

Inhaltsverzeichnis Entwurfsszenario Technische Pu...

Tipps zur MySQL-Leistungsoptimierung

MySQL-Leistungsoptimierung MySQL wird in Internet...

Tutorial zur Bereitstellung und Installation von MySQL 8.0.18 unter Windows 7

1. Vorbereitende Schritte (Windows 7 + MySQL-8.0....

Zusammenfassung einiger meiner häufig verwendeten Linux-Befehle

Ich habe zwei Jahre lang im Betrieb und in der Wa...

So rufen Sie die Browser-Sharing-Funktion in Vue auf

Vorwort Vue (ausgesprochen /vjuː/, ähnlich wie vi...

Lösung für das 404/503-Problem beim Anmelden bei TeamCenter12

TeamCenter12 gibt das Kontokennwort ein und klick...