坐標(biāo)軸是在很多數(shù)據(jù)展示場合中必不可少的元素，而用css就可以輕松地畫出呈現(xiàn)簡明大方的坐標(biāo)軸。

.axis {
position: relative;
width: 500px;
height: 300px;
border: 1px solid #ccc;
}
.axis .x-axis,
.axis .y-axis {
position: absolute;
width: 100%;
height: 100%;
}
.axis .x-axis {
bottom: 0;
}
.axis .y-axis {
left: 0;
}
.axis .tick {
position: absolute;
background-color: #ccc;
font-size: 12px;
text-align: center;
white-space: nowrap;
}
.axis .x-axis .tick {
border-left: 1px solid #999;
bottom: -5px;
}
.axis .y-axis .tick {
border-top: 1px solid #999;
left: -5px;
}
.axis .x-axis .tick:first-child,
.axis .y-axis .tick:first-child {
border: none;
}
.axis .x-axis .tick short,
.axis .y-axis .tick short {
height: 4px;
width: 1px;
background-color: #000;
margin-left: -1px;
}
.axis .x-axis .tick.short {
bottom: -4px;
}
.axis .y-axis .tick.short {
left: -4px;
height: 1px;
width: 4px;
margin-top: -1px;
}

首先，我們需要創(chuàng)建一個引用軸的容器，然后定義x-axis和y-axis的div作為引用軸的容器，依次將它們映射到容器兩側(cè)。

接下來，每個刻度通過設(shè)置絕對定位來實現(xiàn)。每個刻度都包含一個short，它是表示刻度線的元素。

這樣我們就可以很容易地從零開始畫出一個坐標(biāo)軸。你也可以添加其他元素來增強(qiáng)坐標(biāo)軸的呈現(xiàn)，例如設(shè)置坐標(biāo)軸的寬度，添加文本標(biāo)簽，或者定義元素的顏色等等。