Rumah > hujung hadapan web > tutorial css > Bolehkah saya Mencipta Kesan Bulatan Songsang dalam CSS Tanpa Menggunakan Imej?

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

Mary-Kate Olsen
Lepaskan: 2024-12-05 18:42:11
asal
613 orang telah melayarinya

Can I Create an Inverse Circle Effect in CSS Without Using Images?

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>
Salin selepas log masuk

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;
} 
Salin selepas log masuk

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);
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan