在網頁設計中，常常需要使用到各種圖標來方便用戶使用，例如，我們可以使用CSS來制作一系列的空調圖標。

.ac-icon {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
position: relative;
margin-right: 10px;
}
.ac-icon:before {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #2db7f5;
left: 8px;
bottom: 8px;
}
.ac-icon:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #2db7f5;
right: 8px;
bottom: 8px;
}
.ac-icon .ac-on {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #2db7f5;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.ac-icon .ac-off {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f50;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.ac-icon .ac-speed {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #2db7f5;
right: 50%;
top: 50%;
transform: translate(50%,-50%);
}
.ac-icon .ac-auto {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #2db7f5;
left: 50%;
transform: translate(-50%,-50%);
top: 4px;
box-sizing: border-box;
border: 4px solid #fff;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 16px;
}

這是一段CSS代碼，實現了空調圖標的設計功能，其中使用了偽元素、絕對定位、盒模型以及漸變等多種常用技巧，配合多個子元素的組合，能夠實現靈活多樣的圖標效果。

通過使用CSS技術我們可以實現精美的圖標設計，提高用戶體驗并提升網站質量。