当我遇到一个新产品时,我首先想到的是他们如何实现CSS。当我遇到Meta的Threads时也不例外。我很快就探索了移动应用程序,并注意到我可以在网页上预览公共帖子。 这为我提供了一个深入挖掘的机会。我发现了一...
CSS
12 个实用的高级前端 CSS 技巧
1.解决图片5px间距问题 您是否经常遇到图片底部多出5px空间的问题?别担心,有4种方法可以解决。 方案一:设置其父元素的font-size:0px 方案二:在img的样式中添加display:block 方案三:在img的样...
CSS的will-change,为什么有时候能优化几十倍的性能?
前言 will-change 一个既陌生又熟悉的属性,以前在使用这个属性的时候,单纯是因为要做性能优化,加上will-change会使得动画变得流畅一些,但是实际上到底是什么原因导致加上will-change就能使得动画流畅,它...
简单的聊一聊如何用CSS制作一个专业的头部页眉(Headers)
一个吸引人的网页页眉对于给访问者留下良好的第一印象至关重要。一个设计精良的页眉不仅能够吸引注意力,还能为整个网站设定基调。借助CSS,创建现代化和视觉吸引力的网页页眉比以往任何时候都更加容易。 在...
8 种在 CSS 中隐藏元素的方法汇总
作为 Web 开发人员,我们经常遇到需要隐藏网页上的元素的情况。在本文中,我们将分享8 种在 CSS 中隐藏元素的方法,每种方法都有优点和注意事项。 1. Opacity and Filter: Opacity 隐藏元素最简单的方法之...
CSS Grid 基础入门知识
网格系统(CSS Grid)是CSS中最重要的特性之一。它能够以简单的方式将元素对齐到列和行中。CSS网格使得设计复杂且响应式的网页变得更加容易,无需使用浮动、表格或定位。它还具有许多更强大的功能,如果你多加练...
CSS实现元素固定宽高比
概要 最近项目中有遇到一种场景需要元素以固定宽高比且元素的宽度占父元素的固定百分比的情况,简而言之就是元素的宽度是随浏览器而变化,元素的高度是随元素的宽度变化的。 实现方式一:使用aspect-ratio...
分享 7 个不常用但有用的 CSS 小技巧
在这篇文章中,我想向您展示一些简单的CSS技巧,您可以在下一个项目中使用它们。让我们开始吧! 1、-webkit-text-stroke 通过使用这个简单易用的属性,可以创建出酷炫的文字效果。它可以给文字添加描边。-...
新的 CSS 视口单位:svh、lvh、dvh!
CSS 的 Viewport单位听起来很棒。 如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!!! 遗憾的是,事实并非如此!...
奇妙的 CSS MASK
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出...
