CSS3是前端開發中的一個核心技術，我們可以利用它來實現各種有趣的效果。其中有一個廣泛使用的技巧就是使用CSS3讓寬度=高度。這個技巧可以在網頁設計中提供更多的可能性，讓設計更加豐富多彩。

實現寬度=高度的主要思路就是使用padding-top樣式，然后將padding-top的值設為一個百分比，這個百分比的值可以根據需要進行調整。如果我們將padding-top的值設為100%，則寬度會與高度相等。

.box {
width: 200px;/*設置容器的寬度*/
height: 0;/*設置容器的高度為0*/
padding-top: 100%;/*在容器頂部設置100%的padding-top*/
position: relative;/*設置定位*/
}
.content {
position: absolute;/*絕對定位*/
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #f00;/*設置內容區域的背景顏色*/
}

上面的代碼就是實現寬度=高度的核心代碼。首先我們需要創建一個容器元素，然后將它的高度設置為0，將padding-top設置為100%。這樣做的目的是讓容器的高度隨著padding-top的值變化而改變，從而實現寬度等于高度的效果。

容器的內容我們可以使用絕對定位的方式來實現。我們可以設置內容的上、下、左、右四個方向均為0，這樣就可以讓內容填滿整個容器。最后，我們再設置一下內容的背景顏色，就可以看到寬度等于高度的效果了。

總的來說，CSS3讓寬度等于高度是一個非常有用的技巧，可以為網頁設計帶來更多的可能性。通過使用padding-top樣式，我們可以輕松實現寬度等于高度的效果，讓設計更加豐富多彩。