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

.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的類，用來設(shè)置地圖標(biāo)記的樣式。在這個類中我們設(shè)置了position為absolute，讓標(biāo)記脫離常規(guī)文檔流，可以在頁面上任意位置定位。top和left屬性分別設(shè)置了標(biāo)記距離容器頂部和左側(cè)50%的距離。background-image屬性設(shè)置了標(biāo)記的背景圖片。background-size設(shè)置了背景圖片的大小為cover，讓圖片充滿標(biāo)記。width和height屬性設(shè)置了標(biāo)記的寬度和高度。margin-left和margin-top屬性用來調(diào)整標(biāo)記在頁面上的定位。border-radius屬性設(shè)置了圓角的弧度，使標(biāo)記更具美感。box-shadow屬性為標(biāo)記添加了一個投影，使得標(biāo)記更加立體。

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

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

以上代碼就可以在網(wǎng)頁上顯示出一個簡單的地圖標(biāo)記。

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