CSS（層疊樣式表）是前端開發中必不可少的一部分，它可以讓網頁變得更加漂亮和可讀。本篇文章將會介紹一系列CSS好看的樣式大全。

/* 漸變背景 Color gradient background */
background: linear-gradient(to bottom, #ff416c, #ff4b2b);
/* 扁平化背景 Flat background */
background: #4CAF50;
/* 百分比寬度 Percentage width */
width: 50%;
/* 陰影效果 Shadow effect */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
/* 漸變文字 Gradient text */
background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 玻璃效果 Glass effect */
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
/* 焦點高亮 Focus highlight */
:focus {
outline: none;
box-shadow: 0 0 3px 0 rgba(255, 255, 255, 0.8);
}
/* 切角效果 Cut-out corners */
.clip {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2vw));
}
/* 手繪效果 Hand-drawn effect */
font-family: 'Yellowtail', cursive;
/* 線條圖標 Line icon */
.icon {
height: 2px;
background: #000;
position: relative;
}
.icon:before {
content: '';
position: absolute;
top: -6px;
left: 0;
width: 100%;
height: 2px;
background: inherit;
}
.icon:after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 2px;
background: inherit;
}
/* 粘性側邊欄 Sticky sidebar */
.sidebar {
position: sticky;
top: 0;
padding-top: 20px;
}
/* 平滑滾動 Smooth scroll */
html {
scroll-behavior: smooth;
}

以上就是本篇文章介紹的CSS好看的樣式大全，希望對你的前端開發工作有所幫助。