你可能不需要 .png

分享一些渐变的实际案例。最近在工作中碰到一个这样的进度条，如下 和一般进度条不同的是，上面多了很多小圆点，每个小圆点代表一个进度。 由于是完全自适应的，圆点可以自定义数量，宽度也能自动分配，就像这样

再次介绍一些你可能没用过的SVG小技巧。 有时候会遇到一些完全相同的图形，如果能用上 CSS背景平铺，那就再合适不过了。举个例子，有这样一个按钮 相比普通的按钮，多个左右两个小装饰，如果是你，会怎样实

在平时开发中，有时候会碰到这样的彩色阴影，效果如下 是不是非常有质感？下面分布介绍 CSS 和 SVG 两种实现方式，一起看看吧 一、实现原理 从设计上看，其实原理很简单，一张原图和一张模糊的图，叠加

在平时开发中，有时候会碰到下面这种“弧形”样式，主要分为“内凹”和“外凸”两种类型，如下 该如何实现呢？或者想一下，有哪些 CSS 属性和“弧形”有关？下面介绍 3 种方式，一起看看吧 一、borde

大家可能知道，不久前 twitter 换了一个新 logo，从蓝色小鸟变成了一个 “x”，如下 不聊其他的，看看如何用 CSS 渐变来绘制这样一个图形 一、 x 的绘制 整个 logo 是一个镂空的“

介绍一些关于 CSS 渐变的小技巧~ 一、渐变通常至少需要两个颜色值 通常情况下，渐变至少需要两个颜色。以linear-gradient线性渐变为例 示意效果如下 需要注意的是，即使是纯色的，也就是两

之前看到coco的这样一篇文章： 纯 CSS 实现波浪效果！，非常巧妙，通过改变border-radius和不断旋转实现的波浪效果，有兴趣的可以去研究一下。 这次尝试一下使用 CSS 渐变来实现这样一

今天学习一下利用 CSS 渐变来绘制一个 Chrome 图标，如下 如何仅使用渐变而不借助其他标签呢？一起看看如何实现的吧 一、图形拆解 乍一看好像没法直接通过渐变写出来，所以需要对图形进行简单的拆分

今天来用 CSS 实现一个带圆角的环形 loading 动画，效果是这样的 先不考虑动画，其实就是这样一个图形 那么，如何来绘制呢？下面花两分钟一起看看吧 一、CSS实现思路 首先，看到这环形逐渐消失

提到锥形渐变conic-gradient（也有的称“角向渐变”），很多人都被这个名称给迷惑了，以为就是用来画圆锥的，比如 这样可以得到锥形的放射性图案 当然，再进一步，可以绘制饼图 这个也比较容易想到

2022 全年共计发布了 41 篇关于 CSS 的原创文章。为了方便查阅学习，花了一点时间分类整理了一下，按照时间倒序排序如下 CSS 如何根据背景色自动切换黑白文字？ CSS 如何实现羽化效果？ 万

最近有同事问我这样一个问题：需要绘制一个自适应文本的写作网格线，设计稿是这样的 其实就是一行行虚线，要求如下 虚线的纵向间隔要跟随行高自适应，确保文本在每一栏虚线上 虚线后面的背景是动态的，可以是纯色

本文正在参加「金石计划 . 瓜分6万现金大奖」。 最近碰到这样一个问题，在一张封面上直接显示书名，可能会存在书名看不太清楚的情况（容易受到背景干扰），如下 为了解决这个问题，设计师提了一个“究极”方案

本文正在参加「金石计划 . 瓜分6万现金大奖」。 世界杯正在进行中，也不要忘记学习 CSS~~（得想办法蹭一波热度）~~。比如，用 CSS 绘制一个足球场？ 你也可以提前访问在线地址 CSS foot

练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只猫咪？一起来看看如何实现的吧，有超级多的 CSS 绘制小技巧~

最近在项目中碰到一个这样的角标设计，如下 像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完） 一、圆角矩形和三角形 从设计上可以拆分成两部分，一个圆角矩形和

我正在参加 码上掘金体验活动，详情：show出你的创意代码块 练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？ CSS clock CSS 绘制这样一个布局有几个难点： 环形排

最近项目中看到这样的一个切角效果，如下所示 就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？ 一、自适应方式 这种布局一般有两种自适应方式，当然具体需要哪种可以

需要绘制一个自适应尺寸的菱形，并且还有边框，一般在流程图中很常见，效果如下 如果没有边框的话，用 CSS clip-path 也能很方便的裁剪出一个菱形，但是边框不太好处理

经常用 photoshop 的同学对这样一个透明方格的背景再熟悉不过了，也有的叫做“棋盘”效果， 实现这种效果一定离不开渐变，本文介绍 3 种 CSS 绘制透明方格的小技巧