css优秀元素 |css中li不要前缀怎么弄

/* 1. Grid布局 */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
/* 2. Flexbox布局 */
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
/* 3. 动画效果 */
button {
transition: background-color 0.5s ease;
}
button:hover {
background-color: #ffa500;
}
/* 4. 文字效果 */
h1 {
text-transform: uppercase;
letter-spacing: 3px;
font-weight: bold;
}
/* 5. 阴影效果 */
.box {
box-shadow: 10px 10px 5px grey;
}
/* 6. 渐变背景 */
background: linear-gradient(to bottom, #ffecd2 0%, #fcb69f 100%);
/* 7. 自定义光标 */
a {
cursor: url("custom-cursor.png"), auto;
}
/* 8. 响应式设计 */
@media (max-width: 768px) {
.box {
width: 100%;
}
}
/* 9. 背景图片定位 */
.background {
background: url("bg.jpg") no-repeat center center fixed;
background-size: cover;
}
/* 10. 主题切换 */
body {
--primary-color: #000;
}
.dark-mode {
--primary-color: #fff;
}

上述CSS元素只是众多有用的CSS技巧的一小部分。熟练运用这些技巧可以使您的网站更加美观、易于使用和更具创意。在学习和使用这些技巧时，请记得遵守最佳实践，确保您的代码易于维护和更新。