在網頁設計中，有時候需要實現一個方塊，它的寬和高應該相等。這就需要用到 CSS3 的一些屬性。

.square {
width: 100px; /* 設置寬度 */
height: 100px; /* 設置高度 */
}

上面這段代碼可以實現一個寬高為 100 像素的方塊。但是，如果想要這個方塊的寬和高自動適應屏幕的大小，就需要使用 CSS3 中的另外一些屬性。

.square {
width: 100%; /* 寬度自適應 */
padding-bottom: 100%; /* 高度為寬度的百分之一百 */
position: relative; /* 設置相對定位 */
}
.square:before {
content: ""; /* 空內容 */
display: block; /* 塊級元素 */
float: left; /* 浮動 */
height: 0; /* 高度為 0 */
margin-top: -100%; /* 上邊距為負的百分之一百 */
}
.square:after {
clear: both; /* 清除浮動 */
}

這段代碼中，我們使用了 padding-bottom 與寬度相等的方法來實現寬高自適應。同時，還加上了偽元素 :before 實現等比縮放。這里的 -100% 是指該偽元素的上邊距為負的百分之一百，也就是把它向上移動一個正方形的高度。

總的來說，CSS3 提供了很多實用的屬性，幫助我們更加方便地實現頁面效果。