摘要： 在图形编辑软件中，可以按特定地方式处理不同图层的合成，最新的CSS规范也引入了该功能，并提供了mix-blend-mode和background-blend-mode两个属性。混合模式（blending mode）是一种数学算法，可计算元素重叠部分的颜色值，目前已定义了十多种不同的混合模式。 一、元 阅读全文

摘要： 滤镜（filter）可改造元素的视觉呈现，CSS内置的滤镜有10种，通过SVG文件还能自定义滤镜。 一、调色滤镜 调色滤镜可控制元素的模糊、颜色、亮度等变化，并且多个滤镜可组合在一起使用。这些滤镜大部分既能接收百分数，也能接收数值。当传入的值大于上限值时，会以上限值来处理。 1）模糊 blur()滤 阅读全文

摘要： 渐变是由两种或多种颜色之间的渐进过渡组成，它是一种特殊的图像类型，分为线性渐变和径向渐变，这两类渐变还会细分为单次和重复两种。渐变图像与传统图像相比，它的优势包括占用更少的字节，避免额外的服务器请求，调试成本更低等。在平时，发挥自己的想象，利用渐变可以创造出许多奇妙的视觉特效。 一、线性渐变 线性渐 阅读全文

摘要： CSS规范新增了一个模块：CSS Shapes，shape-outside属性属于该模块，它能影响浮动元素周边内容流的形状（即浮动形状），可接收三类值：形状盒子、函数和图像。 一、形状盒子 形状盒子（shape box）会指定形状的边界，既能单独使用，也能与另外两类值组合使用，可选的关键字如下所列， 阅读全文

摘要： 一、粘滞定位 粘滞定位（sticky）与相对定位类似，既不会脱离正常流，也不会改变元素盒类型，并且会保留原先所占的空间。它会相对于包含块偏移，它的包含块分为两种，第一种和绝对定位一样；第二种是最近的滚动祖先，即overflow属性是hidden、scroll、auto或overlay时。接下来用一个 阅读全文

摘要： 一、伪类选择器 伪选择器弥补了常规选择器的不足，能够实现一些特殊情况下的样式，例如在鼠标悬停时或只给字符串中的第一个字符指定样式。与类选择器类似，可以从HTML元素的class属性中查看到，但伪选择器不会出现在HTML文档中（有几个例外,如:lang、::placeholder等）。并且它的关键字大 阅读全文

摘要： 一、box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行、跨列或跨页时的样式渲染，它包含两个值： （1）slice：默认值，盒子会被分割成多部分。 （2）clone：断开的各个盒子会单独渲染。 下面用一个示例来演示两种的区别， 阅读全文

摘要： 内容引用自《前端架构：从入门到微前端》第9章。 微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。 微前端的实现意味着对前端应用的拆分。拆分的目的并不只是为了在架构上好看，还 阅读全文

摘要： 这两天窝在家里又看了本CSS相关的书：《CSS重构：样式表性能调优》。重构是指在不改变代码行为的前提下，重写代码，使其更加简洁、易于复用。 这本书读起来比较快，可挑自己感兴趣的读，前面三章是基础知识的介绍，都了解的话可直接跳过。第四章是为样式分类，我比较感兴趣的是第四章（测试）和第五章（代码的组织和 阅读全文

摘要： 最近在读一本名为《图解网站分析：让流量倍增的网站优化方法》的书，此书认为，网站分析有以下作用： 1、将用户在网站外的行为可视化。 2、将用户在网站内的行为可视化。 3、通过可视化的信息把握网站的运营状况。 4、根据可视化的结果拟定网站的改善方案。 5、评估已实施改善方案的效果。 本书详细讲解了网站分 阅读全文