CSS邊框效果可以讓網頁設計更加美觀和吸引人。下面介紹45個常用的CSS邊框效果：

/*實線邊框*/
border: 1px solid #000;
/*虛線邊框*/
border: 1px dashed #000;
/*點框邊框*/
border: 1px dotted #000;
/*雙線邊框*/
border: 2px solid #000;
/*圓角邊框*/
border-radius: 5px;
/*內陰影*/
box-shadow: inset 0 0 10px #000;
/*外陰影*/
box-shadow: 0 0 10px #000;
/*箭頭邊框*/
border: 10px solid transparent;
border-bottom: 10px solid #000;
/*梯形邊框*/
border-left: 30px solid transparent;
border-bottom: 50px solid #000;
border-right: 30px solid transparent;
/*純CSS三角形*/
width: 0;
height: 0;
border-top: 50px solid #000;
border-bottom: 50px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
/*只顯示兩個角的邊框*/
border-top: 10px solid #000;
border-left: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
/*純CSS菱形*/
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid #000;
/*漸變邊框*/
border-image: linear-gradient(to bottom, #000, #fff) 1 100%;
/*斜向邊框*/
border: 10px solid #000;
border-color: #000 transparent transparent transparent;
/*波浪邊框*/
border: 5px solid #000;
box-sizing: border-box;
width: 200px;
height: 80px;
position: relative;
margin: 50px auto 0 auto;
background: #fff;
overflow: hidden;
transform: scale(0.5) rotate(30deg);
/*雙斜線*/
background: linear-gradient(45deg, #000 50%, transparent 50%);
background-size: 20px 20px;
border: 1px solid #000;
/*正方形虛線*/
width: 100px;
height: 100px;
background: linear-gradient(45deg, #000 50%, transparent 50%), linear-gradient(135deg, #000 50%, transparent 50%);
background-size: 20px 20px;
border: 1px solid #000;
/*菜單箭頭*/
border: 10px solid transparent;
border-bottom: 10px solid #000;
position: relative;
display: inline-block;
margin-right: 5px;
/*多重邊框*/
padding: 50px;
background: #fff;
border: 10px solid #000;
box-shadow: 0 0 10px #000;
position: relative;
&:before {
content: '';
position: absolute;
top: -20px;
left: -20px;
width: 100%;
height: 100%;
border: 10px solid #000;
box-shadow: 0 0 10px #000;
}

使用這些CSS邊框效果，可以讓網頁設計更具有吸引力并且增加用戶體驗。如果想要了解更多CSS技巧，可以關注CSS學習網站。