最近写了一个文字跑马灯的项目需求，刚开始用js写，能够完成需求。后面想着换种方式(分别是html和css)来实现同一个需求,以减少性能消耗。 1.判断文字的长度和容器的长度，如果文字长度大于容器长度，则开始滚动，否则不滚动。(offsetWidth) 2.获取滚动条到元素左边的…

一、flex布局中水平垂直居中 这还不简单？ 但还可以结合margin来实现，可以不用设置justify-content和align-items 二、最后一个元素靠右对齐 这还不简单？ 简单点： 是不

最近看到了许多关于 :has() 选择器的知识点，在此总结下来。 MDN 对 :has() 选择器 的解释是这样的： 下面一起来感受下 :has() 选择器的强大之处吧。 :has() 选择器选择父元

前言 最近公司在招聘，经常会问到应试者一个问题，“flex: 1 是哪些属性的缩写？”，很多同学答的都不是很好，今天我们来理解一下。 flex：1是哪些属性的缩写 flex：1 是 flex-grow

只用css能否实现一个渐变色的圆角边框 并且 满足背景是不透明呢 方法一、 border-image直接设置 效果： 渐变边框 div背景透明 圆角 参考: 既然border-image不受borde

学习 SVG 需要理解的关键概念之一是多个坐标系的存在，并且它们之间相互转换的机制通常是引起混淆的主要原因。

在开发中，图片的展示方式有两种，第一种是使用 img 标签去显示，第二种是以背景图片显示，也就是使用css 的background-image，但是究竟应该使用哪一种呢？ 一、从操作性去考虑 back

最近我逛热风小程序（一个卖鞋的小程序）时，发现了一个奇特的图片样式。图片的四个圆角是反向的，和常规图片不一样。 思索一番后，我发现想实现这个效果，需要的 CSS 知识还挺多，于是整理这篇文章。

背景 这周工作中需要实现一种卡片效果，如下图所示（左边是 div，右边是图片，二者交界处是弧形）： 怎么实现这个弧形呢？最先想到的方案是，给左边的 div 加上 border-radius： 上述代码