CSS3 在網頁設計中起著非常重要的作用，可以給網頁帶來更加生動、靈活、多彩的視覺效果。下面介紹一些CSS3 實戰源碼，讓你的網頁更加美觀。

/* 圓角邊框 */
.box {
border-radius: 20px;
}
/* 陰影效果 */
.box {
box-shadow: 10px 10px 5px #888888;
}
/* 漸變色背景 */
.box {
background: linear-gradient(to right, #fc00ff, #00dbde);
}
/* 文字陰影 */
.text {
text-shadow: 2px 2px 2px #888888;
}
/* 旋轉圖片 */
.img {
transform: rotate(45deg);
}
/* 縮放圖片 */
.img {
transform: scale(2);
}
/* 給鏈接添加下劃線 */
a {
text-decoration: underline;
}
/* 給按鈕添加懸停效果 */
.btn:hover {
background: #00ff00;
}
/* 自定義復選框樣式 */
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
background: url(checked.png) no-repeat;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
/* 過渡效果 */
.box {
transition: all 0.3s ease-in-out;
}
/* 垂直居中 */
.box {
display: flex;
align-items: center;
justify-content: center;
}

以上是一些常用的 CSS3 實戰源碼，當然還有許多其他的 CSS3 特性，可以根據實際需求來運用。CSS3 讓我們的網頁設計更加豐富多彩，增強了用戶體驗，建議大家多多掌握和應用。