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

Detaillierte Schritte zum Konfigurieren von my.ini für mysql5.7 und höher

Im entpackten Paket von Windows 64-Bit MySQL 5.7 ...

Implementierung eines einfachen Karussells auf Basis von JavaScript

In diesem Artikel wird der spezifische JavaScript...

Wir zeigen Ihnen einen Trick, um einen Textvergleich unter Linux durchzuführen

Vorwort Während des Schreibens des Codes werden w...

Tutorial zur Installation und Konfiguration der entpackten Version von MySql unter Windows 10

Installieren Sie die entpackte Version der MySql-...

Überwachen Sie Änderungen im MySQL-Tabelleninhalt und aktivieren Sie das MySQL-Binärprotokoll

Vorwort binlog ist eine binäre Protokolldatei, di...

React-native-Beispielcode zur Implementierung des Schiebelöscheffekts des Einkaufswagens

Grundsätzlich verfügen alle E-Commerce-Projekte ü...

Grundlegende Verwendung des Befehls wget unter Linux

Inhaltsverzeichnis Vorwort 1. Laden Sie eine einz...

IE6-Schriftart kann nicht definiert werden: Die Größe von 13 Pixeln ist ungültig. IE6 zeigt automatisch eine größere Schriftartlösung an.

Als ich vor einigen Tagen ein Modul einer Webseite...

Lösung für das Problem der unvollständigen Anzeige des Inhalts der ausgewählten Dropdown-Box in HTML und der teilweisen Abdeckung

Heute ist mir ein Problem aufgefallen: Der Inhalt ...

Die Funktionen und Unterschiede zwischen deaktiviert und schreibgeschützt

1: schreibgeschützt dient zum Sperren dieses Steue...

Verwenden Sie Typescript-Konfigurationsschritte in Vue

Inhaltsverzeichnis 1. TypeScript wird in das alte...

So aktivieren oder deaktivieren Sie SSH für einen bestimmten Benutzer oder eine bestimmte Benutzergruppe in Linux

Aufgrund Ihrer Unternehmensstandards gestatten Si...

Detaillierte Erklärung von Cgroup, dem Kernprinzip von Docker

Das leistungsstarke Tool cgroup im Kernel kann ni...

Beispiel für das Erstellen eines virtuellen Hosts basierend auf dem Apache-Port

Apache: Virtuellen Host basierend auf Port erstel...

Lösung für die Protokollpersistenzlösung des Nginx-Ingress-Controllers

Kürzlich habe ich auf einem öffentlichen Konto ei...