简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Membuat Bulatan Telus dengan Jejari Sempadan dalam CSS?

Bagaimana untuk Membuat Bulatan Telus dengan Jejari Sempadan dalam CSS?

Linda Hamilton
Linda Hamiltonasal
2024-10-25 06:09:02793semak imbas

How to Create a Transparent Circle with a Border-Radius in CSS?

Menghidupkan Bulatan dengan Latar Belakang Lutsinar dan Jejari Sempadan dalam CSS

Anda sedang cuba melukis bulatan dengan jejari sempadan, tetapi anda menghadapi kesukaran dalam menindih elemen sambil memastikan latar belakang bulatan itu telus. Ini kerana topeng, yang diperlukan untuk menyembunyikan separuh kiri bulatan semasa putaran, menghalang tindanan daripada kelihatan telus pada elemen lain.

Kod Asal:

<code class="html"><div class="background">
    <div class="wrapper">
        <div class="pie spinner"></div>
        <div class="pie filler"></div>
        <div class="mask"></div>
    </div>
</div></code>
<code class="css">.wrapper .spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    border-right: none;
    border-color: red;
}

.wrapper .filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    left: 50%;
    border-left: none;
}

.wrapper .mask {
    position: absolute;
    width: 50%;
    height: 100%;
    background: #0000FF;
    opacity: 1;
}</code>

Penyelesaian:

  1. Tetapkan imej latar belakang dengan corak kecerunan berulang pada badan, membolehkan latar belakang telus sambil mengekalkan minat visual.
<code class="html"><body>
    <div id="container">
        <div id="halfclip">
            <div class="halfcircle" id="clipped"></div>
        </div>
        <div class="halfcircle" id="fixed"></div>
    </div>
</body></code>
<code class="css">body {
    background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
}

#container {
    width: 200px;
    height: 200px;
    border: solid red 1px;
}

#halfclip {
    width: 50%;
    height: 100%;
    right: 0px;
    transform-origin: left center;
    animation-duration: 16s;
}

.halfcircle {
    height: 100%;
    right: 0px;
    border-radius: 50%;
}

#clipped {
    width: 200%;
    border-top-color: blue;
    border-left-color: blue;
}

#fixed {
    width: 100%;
    transform: rotate(135deg);
    animation-delay: 12s;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bulatan Telus dengan Jejari Sempadan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css for while this border background
Kenyataan：
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 sebelumnya：**Bolehkah Anda Memohon Kelas CSS Terus ke RMarkdown Code Chunks?**Artikel seterusnya：**Bolehkah Anda Memohon Kelas CSS Terus ke RMarkdown Code Chunks?**

Artikel berkaitan

Lihat lagi