大家好!我是宝哥!今天来跟大家分享 25 个 CSS 小技巧,这些可是我多年经验积累下来的宝贵财富,能让你的代码更简洁、更优雅,开发效率蹭蹭蹭地往上飙!
1. 垂直水平居中大法
还记得以前为了让一个元素在容器里居中,要写一大堆代码吗?现在,使用 Flexbox 就能轻松搞定!
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh;
}
2. 文字大小随视窗变化
想让文字大小根据屏幕大小自动调整吗?使用 vw 单位就可以实现响应式文字!
h1 {
font-size: 5vw;
}
3. 保持元素的比例
想要让图片、视频或者其他元素保持固定的比例?用百分比填充就能做到!
.aspect-ratio-box {
width: 100%;
padding-top: 56.25%; /* 16:9 比例 */
position: relative;
}
.aspect-ratio-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
4. 自定义复选框和单选按钮
默认的复选框和单选按钮看起来太单调了?我们可以用 CSS 来定制它们!
<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkmark"></span>
</label>
.custom-checkbox input {
display: none;
}
.custom-checkbox .checkmark {
width: 20px;
height: 20px;
background-color: #eee;
border-radius: 4px;
}
.custom-checkbox input:checked + .checkmark {
background-color: #2196F3;
}
5. 用 CSS Grid 打造复杂布局
CSS Grid 是网页布局的利器,可以轻松创建复杂的页面结构。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
}
6. 实现粘性页脚
让页脚始终固定在页面底部,看起来更专业!
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
7. 平滑滚动链接
点击链接,页面可以平滑滚动,体验更流畅!
html {
scroll-behavior: smooth;
}
8. 让图片自适应大小
图片在不同设备上都能完美显示,这很重要!
img {
max-width: 100%;
height: auto;
}
9. 用省略号截断文本
文本溢出时,用省略号代替,避免显示混乱!
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; /* 或任何宽度 */
}
10. 自定义滚动条
让滚动条更美观、更个性化!
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
11. 全屏背景图片
让背景图片充满整个屏幕,更具视觉冲击力!
.full-screen-bg {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
}
12. 动画渐变背景
让你的网站更活泼,更吸引眼球!
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-gradient {
background: linear-gradient(270deg, #ff7e5f, #feb47b);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
13. 添加图片覆盖层
为图片添加遮罩,营造更丰富的视觉效果。
.image-overlay {
position: relative;
}
.image-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 黑色,透明度为 50% */
}
14. 图片悬停效果
为图片添加悬停效果,让你的网站更生动!
.image-hover img {
transition: transform 0.3s;
}
.image-hover img:hover {
transform: scale(1.1);
}
15. 使用 CSS 变量简化主题切换
方便快捷地修改网站主题,让你的网站更加灵活!
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
button {
background-color: var(--primary-color);
color: var(--secondary-color);
}
16. object-fit 控制图片显示方式
让图片在容器中完美显示,避免变形!
.fit-image {
width: 100%;
height: 200px;
object-fit: cover; /* 或 contain, fill, 等 */
}
17. 防止文本换行
防止文本自动换行,保持整齐美观!
.no-break {
white-space: nowrap;
}
18. 让元素撑满父元素宽度
让元素占据父元素的全部宽度,方便布局!
.full-width {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
19. 使用 CSS 控制 SVG 图标颜色
方便地改变内联 SVG 的颜色,无需修改代码!
.icon {
fill: currentColor;
}
.icon-container {
color: #ff6347;
}
20. 使用命名区域的 CSS Grid
构建更复杂、更灵活的 CSS Grid 布局!
.grid-container {
display: grid;
grid-template-areas:
'header header'
'sidebar content'
'footer footer';
grid-gap: 10px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
21. CSS 过渡效果
为元素添加过渡效果,让页面更平滑、更自然!
.transition-button {
background-color: #3498db;
transition: background-color 0.3s;
}
.transition-button:hover {
background-color: #2ecc71;
}
22. CSS 动画
让你的网页动起来,更生动有趣!
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce {
animation: bounce 2s infinite;
}
23. 使用 CSS 创建不规则形状
突破矩形限制,创建更具创意的形状!
.clip-path {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #3498db;
width: 200px;
height: 200px;
}
24. 实现深色模式
让你的网站更符合用户习惯,并提升用户体验!
:root {
--bg-color: #fff;
--text-color: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #333;
--text-color: #fff;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
25. CSS 计数器
轻松实现计数功能!
.counter-list {
counter-reset: section;
}
.counter-list li::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
掌握这些 CSS 小技巧,你就可以写出更简洁、更优雅的代码,让你的网页开发更轻松,更愉快!
如需转载,请注明来自:前端开发博客 公众号
最后,如果你觉得宝哥的分享还算实在,就给我点个赞,关注一波。分享出去,也许你的转发能给别人带来一点启发。
往期推荐
38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集
程序员必备:9 个超赞的速查表网站,2024 年开发效率翻倍!
Tailwind CSS v4.0 Alpha 发布:更快、更强大、更现代!
Vue 状态管理:从Vuex到Pinia,Vue 3官方推荐的状态管理库深度解析
微软 Edge 推出 "WebUI 2.0":从 React 到 Web Components + HTML,速度提升了42%
我是前端宝哥,每日分享前端开发技术,关注下面二维码,围观我的朋友圈。
![c63e156eba4eb767357bb29e703bce2d.png](https://img-blog.csdnimg.cn/img_convert/c63e156eba4eb767357bb29e703bce2d.png)
备注【文章群】可以进文章分享群,
备注【技术群】可以进技术交流群,
备注【副业群】可以进程序员副业群。
关注下方公众号加星标,送我的电子书资料
回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱
回复「读书」下载成长的相关电子书
觉得好看,请关注我,点“在看”