如何在 CSS 中建立帶有邊框半徑的透明圓？-css教學-PHP中文網

首頁

web前端

css教學

如何在 CSS 中建立帶有邊框半徑的透明圓？

Linda Hamilton

Oct 25, 2024 am 06:09 AM

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

在CSS 中動畫具有透明背景和邊框半徑的圓形

您正在嘗試繪製具有邊框半徑的圓形，但是您在覆蓋元素同時保持圓圈背景透明時遇到困難。這是因為在旋轉過程中隱藏圓的左半部所必需的遮罩可防止疊加層透明地出現在其他元素上。

原始程式碼：

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

登入後複製

解：

解：

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

登入後複製

解決方案：解決方案重複漸變圖案的背景影像，允許透明背景，同時保留視覺興趣。

以上是如何在 CSS 中建立帶有邊框半徑的透明圓？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn