溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何使用純CSS畫一個圓環，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
畫圓環思想很簡單：首先畫兩個圓，設置不同的背景色；然后讓兩個圓的圓心重合即可。
難度系數
☆☆
HTML
<div class="container"> <span class="ring-style"></span> </div>
解析：
此處有父容器
CSS
.container {
position: relative;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.ring-style {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: blue;
width: 260px;
height: 260px;
border-radius: 260px;
}
.ring-style::before {
content: ' ';
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 200px;
height: 200px;
border-radius: 200px;
}解析：
設置元素的寬高、圓角效果，即可畫出一個圓
通過 ::before 偽元素和本體元素，創建兩個圓
通過基于父容器的絕對定位，設置 top、left、translate 屬性，讓元素基于父容器水平、豎直居中，即可讓兩個圓的圓心重合
【 】
效果圖
知識點
border-radius
::before && ::after
元素水平、豎直居中
以上是“如何使用純CSS畫一個圓環”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
