CSS 是前端开发中必不可少的技术，掌握 CSS 可以大大提高页面的美观度和用户体验。下面介绍 10 个不容错过的 CSS 技巧，让你的网页更出色。

/* 技巧1：盒子模型 */
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 10px;
}
/* 技巧2：文本效果 */
.text {
font-size: 18px;
font-weight: bold;
color: red;
text-align: center;
text-transform: uppercase;
text-decoration: underline;
}
/* 技巧3：渐变背景 */
.background {
background: linear-gradient(to bottom right, red, yellow);
}
/* 技巧4：阴影 */
.shadow {
box-shadow: 5px 5px 10px black;
}
/* 技巧5：弹性布局 */
.flex {
display: flex;
justify-content: center;
align-items: center;
}
/* 技巧6：过渡动画 */
.transition {
transition: all 0.5s ease-in-out;
}
/* 技巧7：媒体查询 */
@media screen and (max-width: 768px) {
.box {
width: 50px;
height: 50px;
}
}
/* 技巧8：伪类 */
a:hover {
color: blue;
text-decoration: none;
}
/* 技巧9：自定义字体 */
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font.ttf');
}
.custom-text {
font-family: 'CustomFont', sans-serif;
}
/* 技巧10：transform 变换 */
.transform {
transform: rotate(45deg) scale(1.5);
}

以上 10 个技巧是 CSS 中常用的一些技能，通过熟练运用可以使网页更加美观和有趣。在实际开发中，还应结合具体情况进行调整，使页面更符合用户需求。