CSS中其实有很多专业术语，了解这些术语，有助于加强对css背后的机制的理解。 1. Continuous media & Paged media css样式可以让我们随心所欲的在各种电子产品上显示我们所要表达的东西，诸如在screen，在print，在projection上，…

在本文中，我们将研究新的 loading 属性，它为 <img> 及 <iframe> 带来了延迟加载的能力。如果你对此感兴趣，可查看以下示例： 我们希望在 ~Chrome 75 中为 loading 提供支持，并且我们正在深入研究即将发布的新特性。在此之前，让我们深入了解它的…

使用圆环加载效果可以用可以采用css3+js的方式。这种方式首先我们得有一个圆的图片。。核心是采用显示隐藏的方式，并且依靠层级的方式来控制圆的加载过程。 今天来看看svg实现圆环过渡的过程和原理。 SVG 代码都放在顶层标签 <svg>之中。 当然svg有很多基础知识,你可以点…

以前一段时间，基于对 next 与 graphql 的调研，再加上本人的兴趣，我做了一个站点，也作为我以后各种技术折腾，实践以及兴趣交汇的试验田。 最近我需要在我的实验田使用 jwt 实践校验码的功能。校验码，就是指注册时邮箱或者短信的校验码。需要校验码则需要有登录注册，而在登…

通过元素类型 tagName、*、.class 或 #id 匹配一个或多个元素。 通过 属性 / 属性值 匹配一个或多个元素。 伪类：匹配元素的相关状态和属性，如 :hover :first-child :nth-child() ，单冒号。 伪元素：匹配元素的相关位置, 如 :…

CSS Shapes 允许我们通过定义文本内容可以环绕的几何形状、图像和渐变，来创建有趣且独特的布局。本次教程会教你如何使用它们。 在 CSS Shapes 问世之前，为网页设计文本自由环绕的杂志式布局几乎是不可能的。相反，网页设计布局传统上一直用网格、盒子和直线构造。 CSS…

这3种属性选择器是字符匹配，而非单词匹配。其中，尖角符号^、美元符号$以及星号*都是正则表达式中的特殊标识符，分别表示前匹配、后匹配和任意匹配。 利用这些选择器，纯CSS就可以做出很炫酷的功能。 利用[attr^="val"]前匹配选择器可以判断<a>元素的链接地址类型，以用来…

1. Safari 3D变换会忽略z-index的层级 在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflo…

前言： 通过前 8 篇文章基础知识的铺垫，我们也算是见识了 CSS 的“神通广大”。 这篇文章，我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列，用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。 本篇的所有知识…