英文 | https://medium.com/weekly-webtips/how-to-make-a-doughnut-chart-icon-with-css-72924fbeef47

翻譯 | 楊小二

CSS 邊框一直以來被認(rèn)為是一種特殊屬性，可以創(chuàng)造性地使用它來創(chuàng)建各種 UI 元素，除了邊框——比如筆畫、V 形或箭頭。

在本文中，我們將看看如何使用它來創(chuàng)建一個(gè)有邊框的動(dòng)畫圓環(huán)圖圖標(biāo)，它的最終效果如下所示：

用 CSS 邊框創(chuàng)建甜甜圈

首先，讓我們創(chuàng)建一個(gè)只有一種顏色的甜甜圈。為此，我設(shè)置了以下規(guī)則，在屏幕中創(chuàng)建一個(gè)帶有紅色邊框的 50x50px 黑色矩形。

.doughnut {background: #000;display: block;width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 10px solid red;}

然而，正如你所看到的，這看起來并不像一個(gè)甜甜圈。為了解決這個(gè)問題，并創(chuàng)建一個(gè)筆觸，添加一個(gè)具有透明背景的 100% 邊框半徑：

.doughnut {    ...    border-radius: 100%;}

將段添加到甜甜圈

要添加不同的段，你可以使用單獨(dú)的規(guī)則更改邊框每一側(cè)的顏色：

.doughnut {    ...    border: 10px solid #FF6188;    border-top: 10px solid #A9DC62;    border-left: 10px solid #78DCDC;    border-right: 10px solid #FFD862;}

玩轉(zhuǎn)段和旋轉(zhuǎn)

為了使效果漂亮，你還可以添加一點(diǎn)旋轉(zhuǎn)動(dòng)畫。通過添加一點(diǎn)動(dòng)畫，你還可以將其變成圓形加載指示器：

@keyframes loading {    0%   { transform: translate(-50%, -50%) rotate(25deg);  }    100% { transform: translate(-50%, -50%) rotate(385deg); }}.doughnut {transform: translate(-50%, -50%) rotate(25deg);/* Add animation if you want to turn it into a loading indicator */animation: loading 1s ease-in-out infinite;}

效果如下：

你還可以通過簡單地將相鄰邊框設(shè)為相同顏色來創(chuàng)建更大的段：

.doughnut-01 {/* default values */}.doughnut-02 {border-left: 10px solid #78DCDC;border-bottom: 10px solid #78DCDC;}.doughnut-03 {border-left: 10px solid #FF6188;border-right: 10px solid #FF6188;}

效果如下：

使用不同的邊框樣式

你還可以使用 border-style 屬性來創(chuàng)建不同風(fēng)格的甜甜圈。一些例子是：

.doughnut-01 { border-style: dotted; }.doughnut-02 { border-style: double; }.doughnut-03 { border-style: groove; }.doughnut-04 { border-style: ridge; }

效果如下：

把所有東西放在一起

最后，你還可以使用框陰影為其添加額外的邊框。你可以根據(jù)需要添加任意數(shù)量的 box-shadow，你只需要用逗號(hào)分隔不同的值。

.doughnut {box-shadow: inset 0 0 10px 0px #21212191, 0 0 0 2px #212121;}

將所有內(nèi)容放在一起，這是構(gòu)成元素的最后一組規(guī)則：

.doughnut {display: block;border-radius: 100%;width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(25deg);border: 10px solid #FF6188;border-top: 10px solid #A9DC62;border-left: 10px solid #78DCDC;border-right: 10px solid #FFD862;box-shadow: inset 0 0 10px 0px #21212191, 0 0 0 2px #212121;}

總結(jié)

總之，CSS 邊框可以以各種創(chuàng)造性的方式使用。如你所見，即使你已經(jīng)用完給定元素的邊框?qū)傩?，你仍然可以使?box-shadow 在其上添加額外的邊框。

為了使這個(gè)圖標(biāo)更加可定制，它也可以替換為 SVG 路徑。

你是否已經(jīng)以創(chuàng)造性的方式使用過 CSS 邊框？請(qǐng)?jiān)诹粞詤^(qū)中告訴我！感謝你的閱讀，快樂編程！

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

如何用 CSS 制作動(dòng)畫圓環(huán)圖形圖標(biāo)

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)