位置圖標用CSS怎么寫 位置圖標是我們常見的一種圖標，在網頁設計中常常用到。通過CSS的技巧我們可以自己親手制作出位置圖標。下面我來介紹一下如何實現。 首先，我們需要思考一下位置圖標是由哪些基本圖形構成的。通常情況下，位置圖標由一個點和一個圓圈組成。所以我們要先定義點和圓圈的屬性。 代碼如下： pre{ background-color: #f2f2f2; padding: 10px; font-size: 14px; }

.icon {
display: inline-block;
width: 20px;
height: 20px;
background-color: #333;
border-radius: 50%;
position: relative;
margin-right: 5px;
	}
.icon:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
	}

上述代碼中，我們定義了一個icon類，它是一個內聯塊元素，寬高為20px，背景顏色為黑色。為了讓點垂直居中，我們需要使用position屬性將該元素定位為相對定位，并使用:before偽元素，為該元素添加了一個白色的點，使用絕對定位，上下左右都是50%即可。 完成了點的定義之后，我們需要定義圓圈的屬性。同樣，我們需要使用一個元素，將其背景色設置成白色，同時需要將圓圈邊緣變為黑色。 代碼如下：

.icon-circle {
display: inline-block;
width: 25px;
height: 25px;
border: 2px solid #333;
border-radius: 50%;
position: relative;
margin-right: 5px;
	}
.icon-circle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
	}

可以看到，我們定義了一個icon-circle類，它是一個內聯塊元素，寬高為25px，同時border屬性定義了2px的黑色邊框。為了讓點處于圓心位置，我們需要使用相對定位，然后使用:before偽元素添加一個黑色點即可。 最后，我們將這兩個元素組合起來即可完成位置圖標的制作。 代碼如下：

Icon Point
Icon Circle

上述代碼中，我們在兩個div標簽中分別使用了icon和icon-circle類，通過對應的CSS樣式即可實現位置圖標。 以上就是使用CSS制作位置圖標的方法，相信可以對我們在網頁設計中制作位置圖標有所幫助。常常練習這些基礎知識，是我們成為Web設計師的必備條件。