Kann ich in CSS einen umgekehrten Kreiseffekt erstellen, ohne Bilder zu verwenden?

CSS3 gestalten: Die „Inverse Circle“-Illusion meistern

Dilemma: Einen negativen Raum formen

Stellen Sie sich eine Form vor, die ähnelt einem „umgekehrten Kreis“, kann verwirrend sein. Es ist, als würde der schwarze Rand entlang der Außenkante des Div verschwinden und einen Ausschnitteffekt vor einem einfarbigen Hintergrund hinterlassen. Ist dieses Kunststück allein mit CSS möglich oder sind Bilder obligatorisch?

Lösung 1 (Original): Geometrie und Z-Index-Manipulation

Durch sorgfältige Anordnung der Divs und clevere Mithilfe der Z-Indizierung kann ein irreführender umgekehrter Kreiseffekt erzielt werden, ohne auf Bilder zurückgreifen zu müssen. Durch die Integration negativer Z-Indizes und präziser Offsets stellt diese Lösung sicher, dass die Illusion in Browsern wie IE9, Firefox und Chrome erhalten bleibt.

Lösung 2 (Update): Radiale Hintergrundverläufe nutzen

Radiale Hintergrundverläufe stärken die Fähigkeiten von CSS3 und erweisen sich in Browsern wie Firefox, Chrome, IE10 und Safari als praktikable Option. Dieser innovative Ansatz ermöglicht mehr Flexibilität und ermöglicht die Erstellung umgekehrter Kreise auch in Szenarien mit transparentem Hintergrund.

Implementierung

Original Lösung:

HTML:

<div>

CSS:

.inversePair {
    border: 1px solid black;
    background: grey;
    display: inline-block;    
    position: relative;    
    height: 100px;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
}

#a {
    width: 100px;
    border-radius: 50px;
}

#a:before {
    content:' ';
    left: -6px;
    top: -6px;
    position: absolute;
    z-index: -1;
    width: 112px; /* 5px gap */
    height: 112px;
    border-radius: 56px;
    background-color: white;
} 

#b {
    width: 200px;
    z-index: -2;
    padding-left: 50px;
    margin-left: -55px;
    overflow: hidden;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

#b:before {
    content:' ';
    left: -58px;
    top: -7px;
    position: absolute;
    width: 114px; /* 5px gap, 1px border */
    height: 114px;
    border-radius: 57px;
    background-color: black;
} 

Radiale Gradientenlösung:

HTML : Identisch mit der ursprünglichen Lösung.

CSS:

.inversePair {
    border: 1px solid black;
    display: inline-block;    
    position: relative;    
    height: 100px;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
}

#a {
    width: 100px;
    border-radius: 50px;
    background: grey;
    z-index: 1;
}

#b {
    width: 200px;
    /* need to play with margin/padding adjustment
       based on your desired "gap" */
    padding-left: 30px;
    margin-left: -30px;
    /* real borders */
    border-left: none;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    /* the inverse circle "cut" */
    background-image: -moz-radial-gradient(
        -23px 50%, /* the -23px left position varies by your "gap" */
        circle closest-corner, /* keep radius to half height */
        transparent 0, /* transparent at center */
        transparent 55px, /*transparent at edge of gap */
        black 56px, /* start circle "border" */
        grey 57px /* end circle border and begin color of rest of background */
    );
    background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}

Das obige ist der detaillierte Inhalt vonKann ich in CSS einen umgekehrten Kreiseffekt erstellen, ohne Bilder zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!