顺时针旋转右侧蓝色的半圆，下面渐变的圆会暴露出来，比如旋转 45 度(45/360 = 12.5%)，再将蓝色的右半圆设为灰色，一个 12.5 的饼图就绘制出来了。 background-image， 用于为一个元素设置一个或者多个背景图像， 可以通过 linear-gradi…

最近几天，有好几个同学都问了同样一个问题。 页面上有一段文本，能否实现这段文本在不同背景色下展示不同的颜色？也就是俗称的智能变色。像是下面这样： 文本在黑色底色上表现为白色，在白色底色上表现为黑色。看

CSS 提供了一些功能和属性，可以用于优化打印版本的样式和布局。以下是关于 CSS 打印的一些重要概念和技巧： @media print 媒体查询：通过使用 @media print 媒体查询，可以

本文将介绍如何仅仅使用 HTML/CSS 就可以创建出各种基础进度条及花式进度条及实现其酷炫动画的方式。

如何使用css实现梯形，最近研究了好多方式，在此总结下。 方法一 使用border属性 效果如下 缺点：只能展示梯形的色块，如果你想在图片中展示文字和图片就不行了； 方法二 使用transform 属

CSS 提供了三种出色的方法可以实现基本的形状。本文就来看看如何使用这些方法来实现一个三角形。三种方法如下： border； linear-gradient； clip-path。 1. border

之前写过一篇文章「小tips：如何摆脱浏览器下12px的限制」，不少人觉得“有点东西”。文中提到的“transform: scale()”方法也是利用了CSS中 transform 的特点，可以说兼顾

前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。 1. 伪元素实现 2. 渐变实现 并且渐变可以接受一个角度（比如45deg）作为方向，而且…

随着互联网发展至今，对于网站来说，性能显的越来越重要了，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。所以，我们需要重视与CSS相关的性能优化。