今天我將向大家介紹30個精美的CSS代碼，它們可以為您的網站帶來一些新穎和創新的想法。

1. 設置不同的文本字體大小和顏色
p {
font-size: 16px;
color: #333;
}
h2 {
font-size: 28px;
color: #666;
}
2. 添加邊框和背景
div {
border: 1px solid #ccc;
background-color: #f9f9f9;
}
3. 更改鼠標指針類型
a:hover {
cursor: pointer;
}
4. 添加投影效果
box-shadow: 2px 2px 5px #ccc;
5. 為表格添加樣式
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
}
6. 添加輪廓效果
outline: 1px dashed #ccc;
7. 更改列表樣式
ul {
list-style-type: none;
}
8. 更改超鏈接顏色
a {
color: #666;
}
9. 設置一些常見CSS屬性
p {
margin: 10px;
padding: 5px;
text-align: justify;
}
10. 創建水平線
hr {
border-top: 1px solid #ccc;
}
11. 創建響應式元素
@media screen and (max-width: 768px) {
/* 手機端樣式 */
}
12. 添加漸變效果
background: linear-gradient(to bottom, #fff, #ccc);
13. 更改文字樣式
font-style: italic;
text-transform: uppercase;
14. 創建動畫效果
@keyframes example {
0%   { color: #333; }
50%  { color: #ccc; }
100% { color: #333; }
}
15. 為圖片添加邊框
img {
border: 2px solid #ccc;
}
16. 更改背景圖片大小和位置
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
17. 更改滾動條樣式
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
18. 為表單添加樣式
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
19. 更改表格字體大小和顏色
table {
font-size: 14px;
color: #333;
}
20. 為文本框添加陰影效果
input[type=text] {
box-shadow: 2px 2px 5px #ccc;
}
21. 更改表單按鈕樣式
input[type=submit], input[type=reset] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
22. 添加過渡效果
transition: all 0.3s ease;
23. 更改文字行高和字母間距
p {
line-height: 1.5;
letter-spacing: 2px;
}
24. 為文字添加陰影效果
text-shadow: 2px 2px 5px #ccc;
25. 更改表格的寬度和邊距
table {
width: 100%;
margin: 10px;
}
26. 為表單元素添加hover效果
input[type=text]:hover {
background-color: #f2f2f2;
}
27. 更改文本對齊方式
p {
text-align: center;
}
28. 為表單元素添加焦點效果
input[type=text]:focus {
border: 2px solid #4CAF50;
}
29. 更改下劃線樣式
text-decoration: underline;
30. 為鏈接添加hover效果
a:hover {
color: #4CAF50;
}