餅狀圖是一種常見的數據展示方式。在CSS中,可以通過陰影效果來增強餅狀圖的可視化效果。下面我們將演示如何使用CSS陰影來美化餅狀圖。
/* CSS代碼 */ .pie-chart { position: relative; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0 0 0 7px #fff, 0 0 5px rgba(0, 0, 0, 0.2); } .pie-chart::before { content: ""; position: absolute; top: -7px; left: -7px; right: -7px; bottom: -7px; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff, 0 0 5px rgba(0, 0, 0, 0.2); } .pie-chart__slice { position: absolute; width: 100%; height: 100%; clip: rect(0, 100px, 100px, 50px); } .pie-chart__slice--1 { transform: rotate(0deg); } .pie-chart__slice--2 { transform: rotate(60deg); } .pie-chart__slice--3 { transform: rotate(120deg); } .pie-chart__slice--4 { transform: rotate(180deg); } .pie-chart__slice--5 { transform: rotate(240deg); } .pie-chart__slice--6 { transform: rotate(300deg); } .pie-chart__slice--1:before { background-color: #f00; } .pie-chart__slice--2:before { background-color: #0f0; } .pie-chart__slice--3:before { background-color: #00f; } .pie-chart__slice--4:before { background-color: #ff0; } .pie-chart__slice--5:before { background-color: #f0f; } .pie-chart__slice--6:before { background-color: #0ff; }
以上代碼使用偽元素`::before`來添加內部陰影效果。`box-shadow`屬性用來添加外部陰影效果,`border-radius`屬性控制邊框圓角。對于每個餅狀圖的扇形部分,樣式類為`.pie-chart__slice`,使用`transform`屬性來進行旋轉變換。`clip`屬性用來給扇形部分添加遮罩效果,只顯示圓心和扇形交匯部分。
上一篇autojs顯示json
下一篇css三種按鈕