Bolehkah saya Mencipta Kesan Bulatan Songsang dalam CSS Tanpa Menggunakan Imej?

Membentuk CSS3: Menguasai Ilusi "Bulatan Songsang"

Dilema: Mengukir Ruang Negatif

Membayangkan bentuk yang menyerupai "bulatan songsang" boleh membingungkan. Seolah-olah sempadan hitam hilang di sepanjang tepi luar div, meninggalkan kesan potong pada latar belakang yang kukuh. Adakah prestasi ini boleh dicapai dengan CSS sahaja, atau adakah imej wajib?

Penyelesaian 1 (Asal): Manipulasi Geometri dan Indeks-Z

Melalui susunan div yang teliti dan bijak penggunaan pengindeksan-z, kesan bulatan songsang yang mengelirukan boleh dicapai tanpa menggunakan imejan. Dengan menggabungkan indeks-z negatif dan pengimbangan yang tepat, penyelesaian ini memastikan ilusi bertahan dalam penyemak imbas seperti IE9, Firefox dan Chrome.

Penyelesaian 2 (Kemas kini): Memanfaatkan Kecerunan Latar Belakang Radial

Mengukuhkan keupayaan CSS3, kecerunan latar belakang jejari muncul sebagai pilihan berdaya maju dalam penyemak imbas seperti Firefox, Chrome, IE10 dan Safari. Pendekatan inovatif ini membolehkan lebih fleksibiliti, membolehkan penciptaan bulatan songsang walaupun dalam senario dengan latar belakang telus.

Pelaksanaan

Asal Penyelesaian:

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;
} 

Penyelesaian Gradien Jejari:

HTML : Sama dengan yang asal penyelesaian.

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);
}

Atas ialah kandungan terperinci Bolehkah saya Mencipta Kesan Bulatan Songsang dalam CSS Tanpa Menggunakan Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!