CSS漸變框可以為網頁添加美觀的效果，同時也可以優化用戶體驗。下面是一個簡單的CSS漸變框的例子：

.gradient-box {
height: 200px;
width: 400px;
background: #ffffff; /* fallback color */
background: -webkit-linear-gradient(#ffffff, #c0c0c0); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#ffffff, #c0c0c0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

以上代碼可以創建一個白色到灰色的漸變框，高度為200px，寬度為400px。如果瀏覽器不支持漸變，瀏覽器會顯示一個白色背景。

上面的代碼中用到了兩種不同的寫法，-webkit-linear-gradient和linear-gradient，其中前者是適用于webkit內核的瀏覽器(如Chrome和Safari)，后者是適用于其他瀏覽器的常規寫法。可以在其中指定漸變的起點和終點顏色，甚至可以添加更多的顏色來產生更明顯的效果。

通過CSS漸變框，我們可以為網頁添加更多的維度，使其更生動、富有活力。在實際應用中，我們可以根據需要進行調整并加以完善。