- 框阴影效果向元素添加阴影可以增强其深度和视觉吸引力。
.box {box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
- 平滑的过渡动画 CSS 过渡是增强网页交互性的简单方法。
当鼠标悬停在按钮上时，按钮的背景颜色会平滑地过渡到新颜色。
.button {transition: background-color 0.3s ease;
}
.button:hover {background-color: #3498db;
}
- 强悬停效果增强悬停效果可以通过清晰指示交互元素来改善用户体验。
在悬停时在链接下方添加下划线效果。
a {text-decoration: none;position: relative;
}
a:hover::after {content: '';position: absolute;width: 100%;height: 2px;background-color: currentColor;bottom: 0;left: 0;
}
4.自定义滚动条样式自定义滚动条可以提高网站的整体美观度。
使滚动条变薄并设置滚动条拇指的颜色。
/* For the entire webpage */
::-webkit-scrollbar {width: 10px;
}
::-webkit-scrollbar-thumb {background: #888;
}
5.响应式网格布局使用CSS Grid快速创建响应式布局
创建一个响应式网格，可自动调整以适应不同的屏幕尺寸。
.grid-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 20px;
}
- 渐变背景渐变背景可以为您的网页增添活力和深度
使用线性渐变从一种颜色平滑过渡到另一种颜色。
.gradient-background {background: linear-gradient(to right, #ff7e5f, #feb47b);
}
- 圆形头像 将图像裁剪成圆形，常用于个人资料图片
.avatar {border-radius: 50%;width: 100px;height: 100px;
}
- 文本阴影为文本添加阴影可以提高其可读性和美观性
.text-shadow {text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
- 粘性定位 粘性定位允许元素在到达某个滚动位置时变得固定
.sticky-element {position: sticky;top: 0;
}
- 不透明度 设置元素的不透明度以创建深度感或视觉效果
.transparent-box {opacity: 0.75;
}
- 简单的 Flexbox 布局 创建响应式设计的最快方法之一是通过 Flexbox
.flex-container {display: flex;justify-content: space-between;
}
- 动态伪类使用伪类向元素添加交互状态：
单击按钮时，它的尺寸会稍微缩小，增加触觉反馈效果。
.button:active {transform: scale(0.98);
}
- 多列布局为文本内容创建多列布局以增强可读性：
将内容分为三列，提高了页面的视觉吸引力和可读性。
.multi-column {column-count: 3;column-gap: 20px;
}
- 文本溢出省略号 当文本长度超过容器时使用省略号来指示溢出
.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
- 自定义字体引入并利用自定义字体来增强项目个性：
-face {font-family: 'MyCustomFont';src: url('font.woff2') format('woff2');
}
.body-text {font-family: 'MyCustomFont', sans-serif;
}
