border-image 通过指定一张图片来取替 border-style 定义的样式，但 border-image 生效的前提是： border-style 和 border-width 同时为有效值(即 border-style 不为 none，border-width 不…

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 10 天，点击查看活动详情 今天来研究一下 CSS 中的文本换行。正常情况下，在固定宽度的盒子中的中文会自动换行。但是，当遇到非

-webkit-tap-highlight-color CSS 的 -webkit-tap-highlight-color 属性是一个非标准的属性，它是专门为基于 WebKit 的浏览器（如旧版的 S

UI同学特别喜欢使用文字描边，但是官方的text-stroke效果一言难尽。目前大家一般会使用text-shadow属性叠加的方式来实现文字描边效果。但是这是编译后的css源代码，我们有scss为什么

虽然近些年 CSS 变化很快，但我认为 2021 年是 CSS 的元年。在即将过去的 2021 年，CSS 变化非常地大，其中新增了很多特性，比如 CSS 容器查询、CSS 父选择器、CSS 层叠控制

前端技术日新月异，我们需要不断学习来更新自己的前端知识并运用到自己的项目中。这次笔者整理一些未来普及或者现在同学们可能已经用到的CSS特性，包括SVG图标、滚动特性、CSS自定义属性、CSS

本文将会和这篇 -- CSS 奇思妙想边框动画类似，讲一些文字效果，利用不同的属性搭配，实现各式各样的文字动效。 在写各种 DEMO 的时候，有的时候一些特殊的字体能更好的体现动画的效果。这里讲一个快速引入不同格式字体的小技巧。 当我们相中了一个我们喜欢的字体，它也提供了非常快…

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总…