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

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

Linda Hamilton

發布： 2024-10-25 06:09:02

原創

803 人瀏覽過

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中文網其他相關文章！