CSS3地圖標記是一種方便快捷的方式，在Web頁面中實現地圖標記功能。通過CSS3技術，我們可以用簡單的HTML和CSS來創建自定義的地圖標記，而不需要使用復雜的JavaScript或地圖API。下面我們來看看如何使用CSS3來制作地圖標記。

.marker {
position: absolute;
top: 50%;
left: 50%;
background-image: url('./marker.png');
background-size: cover;
width: 24px;
height: 38px;
margin-left: -12px;
margin-top: -38px;
border-radius: 50%;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

首先，在CSS中我們需要定義一個名為.marker的類，用來設置地圖標記的樣式。在這個類中我們設置了position為absolute，讓標記脫離常規文檔流，可以在頁面上任意位置定位。top和left屬性分別設置了標記距離容器頂部和左側50%的距離。background-image屬性設置了標記的背景圖片。background-size設置了背景圖片的大小為cover，讓圖片充滿標記。width和height屬性設置了標記的寬度和高度。margin-left和margin-top屬性用來調整標記在頁面上的定位。border-radius屬性設置了圓角的弧度，使標記更具美感。box-shadow屬性為標記添加了一個投影，使得標記更加立體。

然后，在HTML中我們可以使用一個div元素添加.marker類名，就可以實現一個簡單的地圖標記。為了定位標記，我們需要將標記的父元素設置為position:relative。

<div style="position:relative">
<div class="marker"></div>
</div>

以上代碼就可以在網頁上顯示出一個簡單的地圖標記。

除了上述樣式，我們還可以在CSS中添加其他屬性，如hover和active等狀態下的樣式，來給地圖標記添加更多效果，使其更加美觀、實用。CSS3地圖標記可以輕松實現定位功能，適用于各類Web應用，例如在線地圖、出行應用等等。