CSS是前端開發中必須掌握的一項技能。在CSS中，我們可以使用眾多的屬性來對頁面進行美化和樣式展示。其中，原點是最基本的一個元素。那么，在CSS中如何編寫原點呢？接下來，本文將逐一介紹。

/* 實心原點 */
.dot-solid {
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
}
/* 空心原點 */
.dot-hollow {
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
}

以上是兩種基本的原點樣式，實心原點用圓形的背景色來表示，而空心原點用了邊框輪廓線代表。其中，圓形邊框的寬度、顏色及邊框半徑即是樣式的主要區別點。接下來，我們可以再加入其他的樣式來進一步美化原點。

/* 添加背景圖片 */
.dot-background {
width: 20px;
height: 20px;
background-image: url('./dot-bg.jpg');
background-size: cover;
border-radius: 50%;
}
/* 添加陰影 */
.dot-shadow {
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}

以上兩個是比較常見的原點樣式組合。添加背景圖片只需在實心原點的基礎上添加背景屬性即可，同時設置尺寸為正方形便于保持等比例拉伸。而添加陰影的樣式則要為原點添加box-shadow屬性，以添加暗度，進一步增強實感。

總之，CSS中原點樣式的類型及組合方法各異，我們可以按照需要來選擇不同的樣式。同時，我們也要養成合理分類命名的習慣，方便代碼管理和重構。