标签: CSS

追风少年 | 7周前 | 前端相关CSS

Chrome 125：CSS 锚点定位来了！

最近， Chrome 发布了 Chrome 125 稳定版本，其中我觉得最有亮点的新特性就是 CSS 锚点定位了。 我觉得 CSS 锚点定位 API （ CSS anchor positioning API ）可以在一定程度上改变 Web 的开发方式，因为它允许我们以原生方式定位相对于其他元素（称为锚点）的元素。 它可以帮助我们简化许多界面功能的复杂布局要求，例如菜单和子菜单、工具提示、选择、标签、卡片、设置对话框等。借助浏览器内置的锚点定位，我们可以在无需依赖第三方库的情况下简单构建分层用户界面。 此 API 的核心就在于锚点和定位元素之间的关系。 锚点指的就是使用 anchor-name 属性指定为参考点的元素，定位元素则是使用 position-anchor 属性或在其定位逻辑中明确使用 anchor-name 相对于锚点放置的元素。 创建锚点非常简单，将锚点名称属性应用于所选元素，并为其分配一...
 96 |  1 |  0 前端相关CSS

念旧。 | 2个月前 | 前端相关CSS

分享10 个功能强大的单行 CSS 布局技巧

现代 CSS 布局允许开发人员只需敲击几下键盘即可编写有意义且强大的样式规则。今天的内容主要是想和大家分享 10 个功能强大的 CSS 布局，它们做了一些非凡的工作。 01. Super center: place-items: center 对于我们的第一个“单行”布局，让我们解决 CSS 中最大的谜团：居中。我想让你知道，使用 place-items: center 比你想象的更容易。 首先，指定 grid 作为显示方式，然后，在同一个元素上写上 place-items: center 。place-items 是同时设置align-items 和justify-items 的快速方法。通过将其设置为居中，align-items 和 justify-items 都将设置为居中。 .parent { display: grid; place-items: center; } 这使得内容可以在父级中
 82 |  0 |  0 前端相关CSS

大牛猫 | 2个月前 | 前端相关CSS

CSS 实现卷轴滚动效果

分享一个有趣的滚动特效 「庆余年2」 终于开播了 最近起点读书APP内上架了庆余年典藏书，最大的特色是里面新加入了全新的阅读皮肤，一个拟物化的卷轴滚动效果，效果如下 就是在拖动页面时，卷轴会随着页面的滚动而展开或卷起，就像在拖动真的画布一样，非常舒适，录屏可能看着不是很清晰，强烈建议去端内自行体验。 当时看到这个效果时就在思考，如何在 web 中也实现这样一个效果呢？🤔 经过一番琢磨，发现仅使用 CSS 就能完成这样的效果。下面是我复刻的效果 这是如何实现呢？一起看看吧 一、CSS卷轴滚动的原理 首先 CSS 中并没有真正的 3d 滚动，立方体还可以勉强拼接，这种圆形的不行，因此我们需要用其他方式来实现。 这里其实是一个最简单的平移动画，只需要将纹理上下无缝...
 123 |  0 |  0 前端相关CSS

晚风 | 2个月前 | 前端相关CSS

CSS 实现从上到下从左到右的列表布局

正常情况下，网页中的列表都是从左到右，从上到下的，如下 但有时候可能需要从上到下，从左到右的排列方式，就像这样 其实这种排序更符合日常生活中的排列方式。 虽然在网页中不常见，但如果真的碰到了这种布局，该如何处理呢？ 有些同学可能会想到用 JS 将元素数组分成三份，做成一个二维数组，然后每个数组嵌套一层容器水平排列就行了。其实呢，纯 CSS 也是可以完成的，一起来看看吧 一、grid 布局 很多同学很自然会想到 grid 布局。没错， grid 也能实现这样的效果，不过有些局限性。 简单写一下页面结构， HTML 如下 <pre data-line="32" <section <span </span <span </span <span </span </section <c...
 106 |  0 |  0 前端相关CSS

女王范 | 2个月前 | 前端相关CSS

15 个你不知道的 CSS 属性 web前端开发 web前端开发

在Web 开发领域中，CSS（层叠样式表）是构建网站视觉美感和布局的支柱。虽然许多开发人员熟悉常用的 CSS 属性，但仍有大量隐藏的宝石等待被发现。 在今天这篇文章中，我们揭示了 15 个隐藏的 CSS 属性，这些属性可能没有引起您的注意，但在增强您的网页设计能力方面具有巨大的潜力。 1.backdrop-filter: 此属性将图形效果（例如模糊或色移）应用于元素内容后面的区域。它非常适合创建磨砂玻璃效果或为元素添加微妙的视觉增强效果。 .element { backdrop-filter: blur(5px); } 2.clip-path： 剪切路径允许您定义剪切区域以有选择地显示元素的一部分，从而实现简单矩形之外的复杂且富有创意的形状。 .element { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } 3.mix-blend-mode: 此属性控制元素的内容与其背景混合的方式，提供与图形设计软件中类似的
 122 |  0 |  0 前端相关CSS

一纸荒年 | 2个月前 | 前端相关CSS

CSS加载会造成堵塞吗？

1.配置浏览器网络速度 首先配置浏览器网络速度，使现象更明显。 1. 打开chrome控制台(按下F12)，选择No Throttling，并在Custom中选择Add 2. 对浏览器上传与下载速度进行限制 2. CSS加载不会堵塞DOM的解析，但会堵塞DOM的渲染 <!DOCTYPE html <html lang="en"   <head     <title

 121 |  0 |  0 前端相关CSS

晴天 | 2个月前 | 前端相关CSS

15个CSS 常见错误，请一定要注意避免

在不断发展的 Web 开发领域，掌握 CSS（层叠样式表）对于制作视觉上令人惊叹且响应迅速的网站至关重要。 然而，陷阱比比皆是，即使是经验丰富的开发人员也可能会发现自己陷入了常见的 CSS 错误中。 本文剖析了 15 个常见错误，提供分步说明和代码示例，帮助您创建完美的网页设计。 1. 过度依赖!important： 问题： 过度使用 !important 会导致代码混乱。 解决方案： 对于更干净和可维护的样式，优先考虑特异性而不是 !important。 / Incorrect / .element { color: red !important; } / Correct / section.element { color: blue; } 2. 使用通用选择器进行全局样式设置： 问题： 当使用通用选择器 ( ) 设计所有元素的样式时，会出现意想不到的后果。 解决方案： 选择特定的选择器来精确定位元素。 / Incorrect / {

 122 |  0 |  0 前端相关CSS

蔡文姬 | 2024-04-15 | 前端相关CSS

借助CSS has实现打开弹窗时自动锁定滚动

分享一个 CSS 小技巧 在平时开发中，经常会遇到这样一种问题：当打开一个弹窗时，后面的页面是可以滚动的，演示如下 那么，该如何锁定页面的滚动呢？ 一、传统的实现方式 传统的方式其实也不复杂，就是在打开弹窗时阻止滚动就行了，通常是改变 overflow 属性 <pre data-line="21" <section <span </span <span </span <span </span </section <code data-line="21" <span <span const</span <span openModal</span <span =</span <span (</span <span )</span <span = </span <span {</span <br/ </span <span <span document</span <span .</span <span body<...
 178 |  0 |  0 前端相关CSS

OOM | 2024-04-09 | 前端相关CSS

图解 CSS Grid 布局

Grid（网格）布局是最强大的 CSS 布局方案，用于构建二维布局。Grid 布局将页面划分成一个个网格，可以任意组合不同的网格，实现各种各样的布局。下面就来看看 CSS Grid 布局是如何使用的！ 1. Grid 布局概述 在解释 CSS Grid 布局之前，我们先来看看 Grid 布局中一些重要概念。 （1）网格容器 网格容器是所有网格项的父元素，网格容器会定义 display:grid 。下面例子中，类名为 container 的 div 元素就是网格容器： .container {  display: grid; } <div class="container"   <div class="item" 1</div   <div class="item" 2</div   <div class="item" 3</div   <div class="item" 4</div </div
 172 |  0 |  0 前端相关CSS

渣渣辉 | 2024-03-20 | 前端相关CSS

CSS 实现居左到居右过渡变化的一些思路

介绍一些看似简单又不是那么容易的过渡小技巧。 很多 CSS 属性其实是不支持过渡变化的，例如 flex 中的对齐 <pre data-line="7" <section <span </span <span </span <span </span </section <code data-line="7" <span <span justify-content</span <span :</span start | center | end<br/ </span </code </pre 或者是文本对齐 <pre data-line="13" <section <span </span <span </span <span </span </section <code data-line="13" <span <span text-align</span <span :</span left | center | right<br/ </span </code </pre 这样属性在变化时是没有过渡动画的，但有时又需要这样的动效，比如下面这个效果 ![图片](h...
 227 |  0 |  0 前端相关CSS

大牛猫 | 2024-03-05 | 前端相关CSS

两行CSS让页面提升了近7倍渲染性能！

前言 对于前端人员来讲，最令人头疼的应该就是页面性能了，当用户在访问一个页面时，总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢，你的用户很可能会因此离你而去。所以页面性能对于前端开发者来说可谓是重中之重，其实你如果了解页面从加载到渲染完成的整个过程，就知道应该从哪方面下手了。 嗯，不要跑偏了，今天我们主要来研究长列表页面的渲染性能 现如今的页面越来越复杂，一个页面往往承载着大量的元素，最常见的就是一些电商页面，数以万计的商品列表是怎么保证渲染不卡顿的，大家在面对这种长列表渲染的场景下，一般都会采用分页或者虚拟列表来减缓页面一次性渲染的压力，但这些方式都需要配合JS来时实现，那么有没有仅使用CSS就能够实现的方案呢？ 答案是有的，它就是我们今天的主角 —— 内容可见性（content-visibility） content-visibility 属性值 ❝ content-visibility 是CSS新增的属性，主要用来提高页面渲染性能，它可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染。 ❞ ...
 283 |  0 |  0 前端相关CSS

心如止水 | 2024-02-29 | 前端相关CSS

两行 CSS 轻松实现明暗模式

在 Web 开发中，为了根据用户的偏好模式（明暗模式）调整网页颜色，我们以前可能会使用媒体查询（ prefers-color-scheme ）。如今，CSS提供了一种更为简便的方法： light-dark() 函数。此函数能够根据当前颜色方案自动选择两种颜色中的一种进行输出，从而实现颜色的自适应显示。 以前的明暗模式实现 要根据所使用的浅色模式或深色模式更改颜色值，可以使用 prefers-color-scheme 媒体查询来更改自定义属性的值： <pre data-line="12" <section <span <span </span <span </span <span </span </span <span </span </section <pre data-title="true" <code data-line="12" <span <span <span :root</span </span <span {</span <br/ </span <span <span --text-color</span <span :</span <spa...
 269 |  0 |  2 前端相关CSS

石昊 | 2024-02-28 | 前端相关CSS

66 个 CSS 函数，一网打尽！

随着技术的不断进步，CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力，还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数，逐一剖析它们的功能和用法，一起进入这个充满魔力的 CSS 函数世界！ 基础 attr() attr() 函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。这个函数也可以应用于伪类元素，此时它获取的是伪元素所依附的原始元素的属性值。 下面来看一个简单的例子： <pre data-line="12" <section <span <span </span <span </span <span </span </span <span </span </section <pre data-title="true" <code data-line="12" <span <span div</span <...
 214 |  0 |  0 前端相关CSS

布朗熊 | 2024-01-29 | 前端相关CSS

CSS 和 SVG 实现彩色图片阴影

在平时开发中，有时候会碰到这样的彩色阴影，效果如下 是不是非常有质感？下面分别介绍 CSS 和 SVG 两种实现方式，一起看看吧 一、实现原理 从设计上看，其实原理很简单，一张原图和一张模糊的图，叠加在一起就行了，示意如下 那么具体如何实现呢？接着往下看 二、CSS 滤镜 首先，单纯的 CSS 并不能直接做出这种效果，毕竟无法生成一份相同的图片，因此，我们需要手动创建一个相同的图层。 假设 HTML 如下 <pre data-line="27" <section <span </span <span </span <span </span </section <code data-line="27" <span <span <span <span <</span d...
 273 |  0 |  0 前端相关CSS

渣渣辉 | 2023-12-23 | 前端相关CSS

登录页面一些有趣的 css 效果，太好看了！

前言 今天无意看到一个登录页， input 框 focus 时 placeholder 上移变成 label 的效果，无聊没事干就想着自己来实现一下，登录页面能做文章的，普遍的就是按钮动画， title 的动画，以及 input 的动画，这是最终的效果图（如下）， 同时附上预览页以及实现源码。 title 的动画实现 首先描述一下大概的实现效果， 我们需要一个镂空的一段白底文字，在鼠标移入时给一个逐步点亮的效果。文字镂空我们可以使用 text-stroke , 逐步点亮只需要使用 filter 即可 text-stroke text-stroke 属性用于在文本的边缘周围添加描边效果，即文本字符的外部轮廓。这可以用于创建具有描边的文本效果。 text-stroke 属性通常与 -webkit-text-stroke 前缀一起使用，因为它目前 主要在WebKit浏览器（如Chrome和Safari）中...
 341 |  0 |  0 前端相关CSS