你平时有收藏哪些常用的css代码片断？

在前端开发中，CSS代码片段可以极大地提高我们的工作效率。以下是一些我常用的CSS代码片段：

清除默认样式：

用于消除浏览器默认样式的影响，确保页面在不同浏览器中具有一致的外观。

*,

*::before,

*::after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: Arial, sans-serif;

line-height: 1.6;

}

Flexbox布局：

Flexbox是一种强大的布局模式，可以轻松实现各种复杂的布局。

.container {

display: flex;

justify-content: center; /* 水平居中 */

align-items: center; /* 垂直居中 */

flex-direction: column; /* 垂直排列子元素 */

}

文本截断：

当文本超出容器宽度时，显示省略号。

.text-truncate {

white-space: nowrap; /* 防止文本换行 */

overflow: hidden; /* 隐藏超出容器的文本 */

text-overflow: ellipsis; /* 显示省略号 */

}

CSS变量：

使用CSS变量可以方便地管理和修改主题颜色、字体大小等样式。

:root {

--primary-color: #3498db;

--secondary-color: #e67e22;

--font-size: 16px;

}

body {

color: var(--primary-color);

font-size: var(--font-size);

}

响应式布局：

使用媒体查询实现响应式布局，使页面在不同设备上都能良好地显示。

@media (max-width: 768px) {

/* 在宽度小于768px的设备上应用以下样式 */

.container {

flex-direction: column; /* 垂直排列子元素 */

}

}

渐变背景：

使用线性渐变或径向渐变创建吸引人的背景效果。

body {

background: linear-gradient(to right, #ff9966, #ff5e62); /* 线性渐变 */

/* background: radial-gradient(circle, #ff9966, #ff5e62); /* 径向渐变 */ */

}

阴影效果：

为元素添加阴影效果，增强立体感。

.box {

width: 200px;

height: 200px;

background-color: #fff;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 盒子阴影 */

/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */ */

}

动画效果：

使用CSS动画为页面添加动态效果，提升用户体验。

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.loader {

animation: spin 2s linear infinite; /* 应用动画 */

}