在網頁設計中，盒子邊角的修飾是一個非常重要的元素。合理的使用盒子邊角修飾，可以讓頁面看起來更加美觀、大氣、簡潔。接下來，讓我們來介紹幾種盒子邊角的修飾方式。

.border-radius {
border-radius: 10px; /* 圓角半徑 */
-webkit-border-radius: 10px; /* Safari 與 Chrome */
-moz-border-radius: 10px; /* Firefox */
-ms-border-radius: 10px; /* IE */
}

這是最基本的盒子邊角修飾方式，通過設置border-radius屬性來調整圓角半徑。通過上面的代碼，我們可以看到在不同的瀏覽器中，設置圓角半徑的方法略有不同。需要注意的是，當我們使用圓角邊框的時候，為了保證圓角的效果，該元素的寬度和高度最好是相同的。

.box-shadow {
box-shadow: 0px 3px 3px #999; /* (x軸偏移量) (y軸偏移量) (模糊半徑) (陰影顏色) */
}

除了圓角半徑，還有一種常用的盒子邊角修飾方式，就是投影。我們可以使用box-shadow屬性來設置盒子的投影效果。可以設置的參數有：x軸偏移量、y軸偏移量、模糊半徑和投影顏色。通過這種方式，我們可以獲得立體感更強的盒子，但是也需要注意盒子的寬高要足夠大，否則陰影效果會比較奇怪。

.border-image {
border-image-source: url(border.png); /* 邊框圖片 */
border-image-slice: 30 30 30 30 fill; /* 圖片邊界區域 */
border-image-width: 30px 30px 30px 30px; /* 邊框圖片寬度 */
border-image-repeat: round; /* 邊框圖片重復方式 */
}

如果想要更加復雜的邊角效果，則可以使用border-image屬性。這種方式可以將一個連續的邊框圖片應用到元素的邊框上。其中，border-image-source屬性用于指定邊框圖片，border-image-slice屬性用于指定圖片邊界區域，border-image-width屬性則用于指定邊框圖片的寬度，border-image-repeat屬性用于指定邊框圖片的重復方式。

以上就是關于盒子邊角修飾的三種不同方式，每一種都有其適用的場景和效果。在編寫網頁的時候，根據需要靈活地使用這些元素，可以讓網站看起來更加美觀大方。