CSS揭秘思维导图

自动添加浏览器前缀的工具

当某些值相互依赖时，应该把他们的相互关系用代码表达出来

代码维护VS代码量少

currentcolor

继承

设计要顺应错觉产生的偏差

每个媒体查询都会增加成本

实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸

展开式写法不会清空所有相关的其他属性，可能会干扰呈现效果

原生特性通常比预处理器提供的版本要强大得多

在每个项目开始时使用纯 CSS， 只有当代码开始变得无法保持DRY时，才切换到预处理器的方案

初始值是border-box，意味着背景会被元素的border box（边框的外沿边框）剪裁掉

padding-box意味着浏览器会用内边距的外沿来把背景剪裁掉

box-shadow第四个参数（称作扩张半径）通过指定正值或者负值，可以让投影面积加大或者减小

一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的投影其实像一道实线边框

用box-shadow的好处在于，它支持逗号分隔语法，可以用来创建任意数量的投影

先设置一层常规边框，再设置一层outline属性来产生外层的边框

边框样式比较灵活，可以模拟虚线边框的效果，还可以通过outline-offset属性来控制它跟元素边缘之间的间距

只适用于双层边框的场景

background-position属性允许指定背景图片距离任意角的偏移量，只要在偏移量前面指定关键字。background-position: right 20px bottom 10px;

当偏移量与容器内边距一致的时候，可以用background-origin，让偏移量自动跟着内边距走

background-origin属性其默认值是padding box，改成content-box后background-position的偏移量以content-box为准

background-position : calc(100% - 20px) calc(100% - 10px);

inear-gradient()要在 开头加上一个额外的参数来指定渐变的方向:linear-gradient(to right, #fb3 50%, #58a 0)

单个贴片中包含四条条纹，才有可能无缝拼接成斜向条纹

条纹宽度要和垂直条纹宽度一样时，条纹宽度需要通过勾股定理计算

repeating-linear-gradient()

使用repeating-radial-gradient()可以随意改变斜纹的角度，而且代码中的长度直接表示条纹自身宽度

用hsla()控制颜色

把水平和垂直的条纹叠加起来，让它们透过彼此的透明区域显现

径向渐 变能够创建的最简单的图案是圆点的阵列

生成两层 圆点阵列图案，并把它们的背景定位错开，第二层背景的偏移定位值必须是贴片宽高的一半

用两个直角三角形来拼合出方块

border-radius可以单独指定水平和垂直半径，只要用/分隔两个值即可

border-radius不仅可以接受长度值，还可以接受百分比

高宽不等时，border-radius: 50%;可以实现自适应椭圆

border-radius是简写，对应的展开式属性为：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

可以向border-radius一次性提供空格分隔的多个值。如果传了4个值，这4个值分别从左上角开始以顺时针顺序应用到元素的各个拐角；如果传了3个值，意味着第四个值与第二个值相同；如果传了2个值，意味着第三个值与第一个相同

可以为所有四角提供完全不同的水平半径和垂直半径：斜杠前指定1~4个值，斜杠后指定1~4个值

border-radius: 100% 0 0 0;

用skew()变形属性对矩形进行斜向拉伸

直接用skew()拉伸内容也会拉伸，此时可以对内容再用一次反向skew()变形

需要额外的HTML元素包裹内容

所有样式（背景、边框等）应用到伪元素上，内容不包含在伪元素中，然后再对伪元素进行变形

需要把图片用一个 <div> 包裹起来， 然后对其应用相反的 rotate() 变形样式

max-width: 100%会被解析为容器的边长

要显示为菱形，图片的宽度要与容器的对角线相等，通过scale()变形样式缩放图片

通过scale()变形样式缩放图片时，是以它的中心点进行缩放的。通过width属性来放大图片时，只会以它的左上角为原点进行缩放

clip-path属性可以把元素剪裁成任何形状

polygon()是多边形函数，可以用一系列坐标点来指定任意的多边形，使用百分比时会解析为元素自身的尺寸

只要使用同一种形状函数并且点的数量相同，clip-path属性可以参与动画

linear-gradient可以接受一个角度作为方向，色标的位置信息也可以是绝对的长度值

四角切角效果需要把background-repeat关掉，防止四层渐变背景相互覆盖

用径向渐变来替代线性渐变

使用 border-image ，并通过一个内联的 SVG 图像 来产生切角效果

SVG可以实现与尺寸完全无关的缩放

background-clip属性避免背景色蔓延到边框区域

clip-path属性中可以同时使用百分比数值和绝对长度

不仅可以对任意类型的背景进行裁剪，甚至对替换元素（比如图片）进行裁剪，而且还支持动画效果

当内边距不够宽时，这个方案会裁剪掉文本

用伪元素覆盖上去，通过旋转决定露出多大扇形区

伪元素背景元素与宿主元素保持一致,比率超过50%时改成棕色

可以用负的动画延时来直接跳至动画中的任意时间点，并且定格在那里，以此来实现按照比率来显示饼图

stroke和stroke-width属性用来描边

stroke-dasharray: 20 10;是为虚线描边而准备的，20是虚线线段长度，10是间隙长度

SVG描边时总会把一半绘制在元素外部，另一半绘制在元素内部

box-shadow的绘制过程

box-shadow中，没有任何投影绘制在元素的下层

text-shadow中，文字下层的投影不会被剪裁

box-shadow还有第四个长度参数—扩张半径，这个参数会根据指定的值去扩大或者缩小投影尺寸

应用一个负的扩张半径，而它的值刚好等于模 糊半径，那么投影的尺寸就会与投影所属元素的尺寸完全一致。将完全看不见任何投影

扩张半径设为模糊半径相反值的一半，并且偏移量的值需要大于或者等于模糊半径的一半

设置两块投影（运用两次单侧投影）以实现双侧投影的效果

sepia()滤镜会给图片增加一种降饱和度的橙黄色染色效果，几乎所有像素的色相值都会被收敛到35~40

saturate()滤镜可以给每个像素提升饱和度

hue-rotate()滤镜把每个像素的相色以指定的度数进行偏移

luminosity混合模式会保留上层元素的HSL亮度信息，并从下层吸取色相的饱和度信息

background-blend-mode: luminosity;可以为每层背景单独指定混合模式，不用<img>元素，而是用<div>元素，把这个元素的第一层背景设置为要染色的图片，并把第二层颜色设置成想要的主色调

mix-blend-mode: luminosity;可以为整个元素设置混合模式，需要把图片包裹在一个容器中，并把容器的背景色设置成想要的主色调

混合模式不可以加动画

把背景图片和一个透明背景混合，此时不会出现任何混合效果

切角效果的矩形和渐变生成的小三角形重合

如果要保留水平和垂直方向上的2em长度， 就要用切角渐变的角标位置值除以√2

通过三角函数计算三角形的尺寸

折角三角形需要旋转偏移

出现在底部的浅色投影（或者出现在顶部的暗色投影）会让人 产生物体是凹进平面内的错觉

出现在底部的暗色投影（或者出现在 顶部的浅色投影）会让人产生物体从平面上凸起的错觉

使用多个 text-shadow ，分别为这些投影加上不同方向的少量偏移

重叠多层轻微模糊的投影来模拟描边。这种方法不需要设置偏移量，但是性能较差，因为使用了模糊算法

SVG方案，用stroke描边

通过几层重叠的 text-shadow，通过text-shadow的模糊半径来实现，不需要考虑偏移，但是依赖 text-shadow 来实现文字显示的做法无法实现平稳退化

使用 CSS 滤镜来实现文字的模糊效果

使用一长串累加的投影， 不设模糊并以 1px 的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强 烈模糊的暗投影，从而模拟完整的立体效果

cursor : not-allowed;

cursor: none;

鼠标对元素边 框的交互也会触发鼠标事件

通过background-clip属性把背景限制在原本的区域之内

可以用box-shadow来模拟出一道（实色）边框

需要增加额外的HTML，.overlay负责把这个关键元素背后的所有东西调暗

用伪元素来消除额外的 HTML 元素

可以防止用户的 鼠标与页面的其他部分发生交互

box-shadow 的扩张参数可以把元素的投影向各个方 向延伸放大。可以生成一个巨大的投影，不偏移也不模糊，模拟出遮罩层的效果

视口单位 vmax

无法阻止鼠标交互

想 引 导 用 户 关 注 的 元 素 就 是 一 个 模 态 的 <dialog> 元 素 （ <dialog> 元素可以由它的 showModal() 方法显示出来），那么根据浏览器 的默认样式，它会自带一个遮罩层。借助 ::backdrop 伪元素，这个原生的 遮罩层也是可以设置样式的

resize属性控制元素是否能被用户缩放

超出图片宽度只要这样设置max-width: 100%

调节手柄可以通过伪元素覆盖在调节手柄之上

将原生的滑块控件覆盖在图片上，通过js脚本将滑块移动和<div>的宽度联系起来，实现用控件控制的效果

通过混合模式、滤镜和变形来优化控件

先把这个元素的左上角放置在视 口（或最近的、具有定位属性的祖先元素）的正中心，然后再利用负外边距 把它向左、向上移动（移动距离相当于它自身宽高的一半），从而把元素的 正中心放置在视口的正中心。

借助calc()函数可以简化代码

在 translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度 为基准进行换算和移动的

通过margin属性的百分比值来控制元素左上角位于容器的中心，然后再用translate()技巧来把元素以其自身高度宽高的一半为距离进行移动

margin的百分比是以父元素的宽度作为解析基准的

这个方案只适合在视口中居中的场景

先给这个待居中元素的父元素设置display: flex，再给这个元素自身设置margin: auto

Flexbox 的另一个好处在于，它还可以将匿名容器（即没有被标签包裹 的文本节点）垂直居中

计算出页脚所占高度和大标题与最顶部的距离，然后让内容的最小高度为（视口高度-页脚所占高度-大标题与最顶部的距离）

这套方案不仅要求我们确保页脚内的文本永远不会折行， 而且每当我们改变页脚的尺寸时，都需要跟着调整min-height值

对父元素设置display: flex，当父元素获得这个属性之后，就可以对其 子元素触发“伸缩盒布局模型”

flex-flow设置为column， 让子元素排放在一列上

把父元素的min-height属性指 定为100vh，这样它就至少会占据整个视口的高度

只要给子元素的flex属性指定一个大于 0 的值（比如 1 即可），内容区块的高度应该可以自动伸展并占满所有的可用空间

所有过渡和动画都是跟一条曲线（缓动曲线）有关的，这条曲线指定了动画过程在整段时间中是如何推进的

下落方向上的调速函数是加速的（ease- out），而弹起方向上是减速的（ease-in）

CSS 提供了cubic-bezier()函数，允许我们指定自定义的调速函数。它接受四个参数，分别代表两个控 制锚点的坐标值， 我们通过这两个控制锚点来指定想要的贝塞尔曲线。

曲线的控制锚点可以在垂直方向上突破 0~1 区间，从而让过渡达到低于0或高于100%的程度。它表示如果我们要从 scale(0) 的变形程度过渡到 scale(1) ，就还将经历一个比最终值更大的状 态，比如 scale(1.1)

鼠标不聚焦时，需要覆盖过渡的持续时间和缓动曲线

颜色不适合做弹性过渡动画

当我们在transition简写属性中不指定任何属性时，transition-property就会得 到它的初始值：all。这意味着只要是可以过渡的属性，都会参与过渡。

嵌套的两层变形会相互抵消

animation-direction属性的reverse值得到原始动画的反向版本

每 个transform-origin都是可以被两个translate()模拟出来的