CSS應(yīng)用是Web設(shè)計和開發(fā)者必須要面對的一個問題。CSS是一種用來設(shè)定HTML元素顯示方式和布局的語言。使用CSS可以讓我們更好地控制網(wǎng)站的樣式和布局，從而提高用戶體驗。

下面是一些常見的CSS應(yīng)用題，希望對你學(xué)習(xí)CSS有所幫助。

/* 1. 垂直居中 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 2. 滾動條樣式 */
::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-color: #000000;
}
/* 3. 文本溢出顯示省略號 */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 4. 圓形圖片 */
.circle {
border-radius: 50%;
}
/* 5. 上下移動的文本 */
@keyframes move {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
.move {
animation: move 2s linear infinite;
}
/* 6. 漸變文字 */
.gradient-text {
background: -webkit-linear-gradient(#F99D4E, #F4A86D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 7. 漸變背景 */
.gradient-bg {
background: -webkit-linear-gradient(#FCEABB, #F8B500);
}
/* 8. 盒子陰影 */
.shadow {
box-shadow: 2px 2px 10px #888888;
}
/* 9. 點擊效果 */
.click-effect {
transition: all .2s ease-in-out;
}
.click-effect:hover {
transform: scale(1.2);
cursor: pointer;
}
/* 10. 自適應(yīng)布局 */
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: flex-start;
}
}