CSS畫漸變圓點是一個很特別的技術，它可以讓我們在網頁設計中增加一些精細的效果。以下是如何利用CSS來繪制漸變圓點的代碼：

/*用CSS3 實現圓點的漸變*/
.gradient-dot {
width: 20px;
height: 20px;
border-radius: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#EA4986), to(#F04245));
background:-moz-linear-gradient(top,#EA4986,#F04245);
background:-o-linear-gradient(top,#EA4986,#F04245);
background:-ms-linear-gradient(top,#EA4986,#F04245);
background:linear-gradient(to bottom,#EA4986,#F04245);
-webkit-box-shadow: 0 1px 2px #e0556a inset, 0 -1px 2px #d45f6f inset;
box-shadow: 0 1px 2px #e0556a inset, 0 -1px 2px #d45f6f inset;
}

讓我們來看看上面代碼的含義。首先，我們建立了一個CSS類.gradient-dot，該類用于規定一個寬度和高度為20px的元素，樣式為圓角半徑為10px。接下來，我們在背景屬性中使用了從上到下的漸變顏色，其中漸變從#EA4986到#F04245?，F在，讓我們一一解讀上述的代碼：

• background: -webkit-gradient(linear, left top, left bottom, from(#EA4986), to(#F04245)); 是用于webkit瀏覽器的代碼，用來實現從上到下的漸變顏色。
• background:-moz-linear-gradient(top,#EA4986,#F04245); 是用于Firefox瀏覽器的代碼，用來實現從上到下的漸變顏色。
• background:-o-linear-gradient(top,#EA4986,#F04245); 是用于Opera瀏覽器的代碼，用來實現從上到下的漸變顏色。
• background:-ms-linear-gradient(top,#EA4986,#F04245); 是用于IE瀏覽器10及以上版本的代碼，用來實現從上到下的漸變顏色。
• background:linear-gradient(to bottom,#EA4986,#F04245); 是用來實現從上到下的漸變顏色。
• -webkit-box-shadow和box-shadow屬性用來定義元素的投影效果。

這樣，我們就可以使用上述代碼來實現漸變圓點的效果了。