在CSS3中，給圓添加投影可以通過(guò)使用box-shadow屬性來(lái)實(shí)現(xiàn)。box-shadow屬性可以為一個(gè)元素添加多個(gè)陰影，每個(gè)陰影由四個(gè)部分組成：水平偏移、垂直偏移、模糊半徑和顏色，我們可以利用circle形狀的函數(shù)來(lái)繪制一個(gè)圓，并給它添加投影。
下面是一個(gè)示例代碼，展示如何給圓添加投影：
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.7);
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>在這個(gè)示例中，我們創(chuàng)建了一個(gè)類名為circle的div元素，它表示一個(gè)寬度和高度都為100px的圓，通過(guò)border-radius: 50%，我們將這個(gè)正方形變成圓形，我們使用box-shadow屬性給圓添加投影，這個(gè)投影的水平偏移為10px，垂直偏移為10px，模糊半徑為5px，顏色為黑色（rgba(0, 0, 0, 0.7)），我們?cè)O(shè)置圓的背景顏色為紅色（#ff0000）。
運(yùn)行這段代碼，你將看到一個(gè)帶有投影效果的紅色圓，你可以根據(jù)需要調(diào)整投影的偏移、模糊半徑和顏色。
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。
