CSS3中國(guó)地圖分部是一種基于CSS3技術(shù)實(shí)現(xiàn)的地圖分布圖,它可以非常方便地給用戶展示各個(gè)區(qū)域的分布情況。下面就讓我們來看一看它的實(shí)現(xiàn)過程:
.map {
width: 600px;
height: 400px;
background-image: url('map.png');
}
.area-A {
fill: #4a4a4a;
}
.area-B {
fill: #6d6d6d;
}
.area-C {
fill: #939393;
}
以上代碼中,我們首先定義了一個(gè)class為map的元素,它會(huì)作為我們整個(gè)地圖的容器。然后我們使用了CSS3中的background-image屬性來為容器添加一張圖片,這里的圖片就是我們要展示的中國(guó)地圖。
接著,我們使用了三個(gè)class來分別給不同的區(qū)域添加不同的顏色,這里我們采用了fill屬性來實(shí)現(xiàn)顏色填充。這樣,當(dāng)我們使用了這個(gè)地圖分布圖后,就能非常方便地展示出各個(gè)區(qū)域的分布情況了。