前端開發中，CSS是不可或缺的一部分，也是網頁設計中最重要的因素之一。在編寫CSS的過程中，經常會使用到各種各樣的技巧，其中一些技巧也被稱為CSS碎片。

1. 清除浮動
.clearfix:after {
content: "";
display: table;
clear: both;
}
2. 消除a標簽文本下劃線
a {
text-decoration: none;
}
3. 視口適應移動設備4. 讓元素垂直水平居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}
5. 設置字體
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}
6. 取消默認邊距和外邊距
* {
margin: 0;
padding: 0;
}
7. 隱藏元素
.hide {
display: none;
}
8. 調整表格邊框
table {
border-collapse: collapse;
border-spacing: 0;
}
9. 設置背景圖像
.background {
background: url("image.jpg") center center no-repeat;
background-size: cover;
}
10. 改變鼠標懸停樣式
.hover:hover {
cursor: pointer;
}
11. 改變文本顏色
.color {
color: #333;
}
12. 改變字號
.size {
font-size: 14px;
}
13. 改變字體加粗度
.weight {
font-weight: bold;
}
14. 設置文字水平居中
.textcenter{
text-align:center;
}
15. 設置段落行高
.lineheight {
line-height: 1.5;
}
16. 設置列表樣式
ul {
list-style: none;
}
17. 設置邊框
.box {
border: 1px solid #ccc;
}
18. 設置元素圓角
.radius {
border-radius: 5px;
}
19. 使圖片響應式
img {
max-width: 100%;
height: auto;
}
20. 設置元素寬高
.size {
width: 200px;
height: 200px;
}
21. 溢出元素處理
.overflow {
overflow: hidden;
}
22. 使字體不可選
.noselect {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
23. 調整元素位置
.position {
position: absolute;
top: 0;
left: 0;
}
24. 調整元素透明度
.opacity {
opacity: 0.5;
}
25. 改變元素背景顏色
.backgroundcolor {
background-color: #fff;
}
26. 禁止文本溢出
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
27. 過渡效果
.transition {
transition: all .3s ease;
}
28. 改變元素對齊方式
.align {
text-align: center;
}
29. 禁止拖拽
.nodrag {
-webkit-user-drag: none;
}
30. 改變元素的透明度
.opacity {
opacity: 0.5;
}

以上30個CSS碎片可以幫助我們更加高效地編寫CSS，提高開發效率。當然，在實際開發中還會有更多的技巧需要我們去發現和使用。