CSS3邊框上漸變是Web設計中常用的一種效果，它能夠為一個頁面元素增加層次感，使其更具吸引力。下面我們來看一些示例。

/* 從上到下的漸變 */
border: 5px solid;
border-image: linear-gradient(to bottom, #000, #fff) 1;
/* 從左到右的漸變 */
border: 5px solid;
border-image: linear-gradient(to right, #f00, #00f) 1;
/* 矩形框懸停效果 */
/* 注意：這個效果在某些瀏覽器上不兼容 */
.box {
border: 2px solid #555;
background: linear-gradient(to bottom, #ccc, #fff);
transition: background 0.5s ease;
}
.box:hover {
background: linear-gradient(to bottom, #fff, #ccc);
}

在上述示例中，我們使用了CSS3的linear-gradient函數來定義漸變效果。該函數的第一個參數指定漸變的方向，可以是to top、to bottom、to left、to right等，第二個參數指定漸變的顏色范圍。

除了linear-gradient，CSS3還提供了其他形式的漸變效果，如徑向漸變、重復漸變等。這些效果的具體用法可以參考W3School的文檔。

總之，CSS3的邊框漸變可以讓頁面元素更具吸引力，同時增加層次感，值得我們在Web設計中應用到。