CSS是一種非常強大的語言，可以為我們的網站添加許多美麗的效果。今天我們將重點介紹如何創建漂亮的動態邊框，讓你的網站變得更加生動。

.box {
border: 2px solid #bdc3c7; /*設置邊框為2px的實線*/
border-radius: 10px; /*設置邊框圓角*/
position: relative;
}
.box::before,
.box::after {
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: -2px;
top: -2px;
z-index: -1; /*將偽元素置于box下層*/
}
.box::before {
background-color: #1abc9c; /*設置左上、右上邊框*/
transform: skew(45deg);
}
.box::after {
background-color: #e74c3c; /*設置左下、右下邊框*/
transform: skew(-45deg);
}

在上述代碼中，我們首先創建了一個帶有2像素實線邊框和10像素圓角的盒子。然后，我們使用偽元素 :before 和 :after 來創建斜角邊框。

使用 transform: skew() 屬性，我們可以使這些邊角以45度的傾斜角度呈現。我們還將偽元素放置在正常盒子下面，這樣它們就可以作為邊框呈現。

最后，我們通過設置 :before 和 :after 元素的不同背景顏色來創建一個美麗的漸變效果。在這個例子中，我們使用了清新的 #1abc9c 和充滿活力的 #e74c3c 顏色。

將這段代碼添加到你的CSS中，然后給你的html添加以下代碼：

<div class="box">
在這里添加你想要顯示的內容
</div>

現在，你就擁有一個漂亮的動態邊框啦，讓你的網站變得更加生動有趣。