原型邊框特效是一種使用 CSS3 技術實現的邊框動畫特效，可以為網站或者應用增添視覺上的創新感。下面我們就來具體學習一下這種特效的實現方法。

.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: #eee;
}
.box::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background-image: linear-gradient(-45deg, transparent 15px, #6c98fc 0, #6c98fc 30px, transparent 0), 
linear-gradient(45deg, transparent 15px, #6c98fc 0, #6c98fc 30px, transparent 0), 
linear-gradient(-45deg, transparent 15px, #6c98fc 0, #6c98fc 30px, transparent 0), 
linear-gradient(45deg, transparent 15px, #6c98fc 0, #6c98fc 30px, transparent 0);
background-size: 50% 50%;
background-position: top left, top right, bottom left, bottom right;
animation: border 4s ease-in-out infinite;
}
@keyframes border {
0% {
background-position: top left, top right, bottom left, bottom right;
}
25% {
background-position: bottom left, top right, bottom left, top right;
}
50% {
background-position: bottom left, bottom right, top left, top right;
}
75% {
background-position: bottom left, top right, bottom left, top right;
}
100% {
background-position: top left, top right, bottom left, bottom right;
}
}

在上述代碼中，我們使用了偽元素 ::before 來實現邊框的展示效果。通過設置其 top、left、right、bottom 屬性來確定邊框位置，并為其設置一個負的 z-index 值讓其在容器中處于背景之后。接著，我們使用了四個線性漸變背景來創建邊框，并設置了相應的位置和大小。最后通過動畫效果，實現了邊框在容器周圍循環展示，從而呈現出原型邊框的特效。