文章目录
- 第2章 伪元素
- 第3章 边框
- 第5章 阴影
- 第6章 剪切、滤镜和色彩混合
- 第7章 变量与计数器
- 第8章 变换
第2章 伪元素
若只论页面布局，那伪元素的作用是很有限的，但在艺术创作上，伪元素却有相当广泛的应用技巧
2.1 ::before和::after伪元素1
单冒号的写法虽然也可以正常渲染，但规范中提到，单冒号用于伪类，双冒号用于伪元素.
伪元素的父级容器即是其主元素，所以对伪元素进行绝对定位时，即是相对于它的主元素左上角的位置进行定位。
2.2 content属性2
即使没有引用文本，也不能省略content属性。
对于content的属性值而言，除明确的字符串以外，还有其他方法获得引用内容。例如，用content: attr(DOM-property-name);的形式引用DOM元素的属性。
到底是把content属性的引用内容写在CSS中，还是写在DOM中，要看应用的场景。如果引用内容仅是用于装饰的，本着内容与表现分离的原则，应该写在CSS中；如果引用内容是业务数据，就应该写在DOM中。
另外，还可以通过content: counter()获得计数器的内容
2.3 灵活使用伪元素
2.3.1 用伪元素拼接造型3
2.3.2 用主元素和伪元素拼接造型4
2.3.3 用伪元素表现造型的一部分5
2.3.4 用主元素和伪元素表现造型的3个部分6
2.3.5 用伪元素表现成对的元素7
在艺术创作过程中，成对的元素是很常见的，例如两只眼睛、两个耳朵、两只手、两只脚、两个车轮等。对于这种成对的元素，一般采用上述方法，即主元素不参与绘制，只定义子元素的位置关系，两个伪元素分别绘制出形状一样的图案，然后再将两个伪元素平移、旋转，定位到合适的位置。
2.4 项目应用
2.4.1 项目一：蒸锅8
.
2.4.2 项目二：怪兽9
.
第3章 边框
3.1 边框属性
3.1.1 边框样式border-style10
3.1.2 边框宽度border-width11
3.1.3 边框颜色border-color12
3.1.4 分别设置每条边框13
3.1.5 边框圆角border-radius14
3.1.6 轮廓线outline15
严格地说，outline并不是边框属性，但是它的性质与边框很相似；outline也用于为元素描边，但和border不同的是，它没有圆角属性，所以它仅能围绕着二级的矩形盒子来描边。
outline的主要用途是作辅助线，对于特殊造型，我们通常想知道它的盒模型到底占据了多大空间，所示，用outline就可以知道这个半圆形15实际占据了一个菱形空间。
3.2 描边造型
3.2.1 同心正方形16
3.2.2 同心圆17
3.2.3 圆弧18
3.3 几何造型
3.3.1 圆形19
3.3.2 半圆形2021
3.3.3 扇形2223
3.3.4 三角形2425
3.3.5 组合的花形26
3.4 项目应用
3.4.1 项目一：铅笔27
.
3.4.2 项目二：宇宙飞船28
.
4.1 背景属性
4.1.1 背景颜色background-color29
4.1.2 背景图片background-image30
4.1.3 背景位置background-position31
4.1.4 背景尺寸background-size32
4.1.5 背景平铺background-repeat33
4.2 线性渐变linear-gradient()
4.2.1 多个参数值3435
4.2.2 锐利的线性渐变36
4.2.3 线性渐变的角度37
4.2.4 有透明度的线性渐变38
除了使用具体的色彩值，也可以使用currentColor关键字来引用当前颜色，另外，还可以使用transparent关键字，表示不使用任何颜色，即使用透明色。
4.3 径向渐变radial-gradient()
4.3.1 多个参数值39
radial-gradient()用于生成径向渐变图片。它的属性值含义与linear-gradient()有很多相似之处，radial-gradient()也接收多个参数，每个参数是一个色彩值。
4.3.2 锐利的径向渐变40
径向渐变的锐利渐变与线性渐变相同，也是为同一个起始位置设置两个色彩值。
4.3.3 椭圆和正圆41
径向渐变有两个独有的属性值，通过在渐变序列前面增加关键字ellipse或circle，可以指定渐变是按容器的形状渐变，还是以圆形渐变。默认值是ellipse，即按容器形状渐变。
4.3.4 有透明度的径向渐变42
和径向渐变类似，也可以使用关键字currentColor和transparent来代替色彩值，分别表示使用当前颜色和使用透明色。
4.4 项目应用
4.4.1 项目一：熊猫43
.
4.4.2 项目二：雷达扫描44
.
第5章 阴影
5.1 盒阴影box-shadow
每个HTML标记和它们的伪元素都是盒子，box-shadow属性用于为这些盒子生成阴影，阴影在盒子外的叫作外部阴影，阴影在盒子内的叫作内部阴影。
5.1.1 外部阴影
① 两个长度参数45
box-shadow属性的最基本的两个长度参数是表示阴影在水平方向和垂直方向的偏移量，偏移量是按相对元素左上角计算的，若水平值和垂直值均为正，则阴影在元素的右下方，这是最常见的阴影方向，意味着光源在屏幕的左上方。
② 3个长度参数46
在第2个长度参数之后再增加一个长度参数，表示阴影的模糊半径，对阴影的外边缘进行模糊处理，半径越长，则越模糊。实际上，是从阴影边缘以阴影颜色开始向周围绘制渐变色，直到模糊半径指定的位置为透明色为止。
③ 4个长度参数47
在第3个长度参数之后，再加一个长度参数，表示阴影的扩散半径。当无此参数或此参数值为0时，表示阴影的尺寸和元素的尺寸相等。如果扩散半径大于0，则阴影的尺寸在元素原尺寸基础上扩大，扩大的长度即是扩散半径的大小。如果扩散半径小于0，则阴影的尺寸在元素原尺寸基础上缩小。
5.1.2 内部阴影48
外部阴影用于描绘物品向外的投影，内部阴影则用于描绘向物品自身的投影。
在阴影参数中增加inset关键字，表示绘制内部阴影，也就是说，默认情况是绘制外部阴影，若要绘制内部阴影，必须明确使用inset关键字。
5.1.3 多重阴影49 50
和background属性接受多组参数以便渲染多个背景的语法类似，box-shadow也可以接受多组参数，用来渲染多重阴影，各组参数之间用逗号分隔。
5.1.4 复制自身的阴影51
如果box-shadow的偏移量比元素本身的尺寸还要大，那么阴影就会绘制到元素之外，不再与元素重叠，看起来就像是获得了和元素等大的新元素，如果再结合扩散半径参数，就能获得和元素形状相同但尺寸成比例的新元素。
5.2 形状阴影函数drop-shadow()52
drop-shadow()函数接收4个参数：水平偏移量、垂直偏移量、模糊半径和颜色。和box-shadow属性相比，少了inset和扩散半径，也就是说，不能用它绘制内阴影，阴影的尺寸也要与本体保持一致。
5.3 项目应用
5.3.1 项目一：日历53
.
5.3.2 项目二：飞机舷窗54
.
第6章 剪切、滤镜和色彩混合
6.1 剪切clip-path
clip-path属性用于在元素内创建一个剪切区域，区域外的部分将被隐藏，仅显示区域内的部分，可以利用几个函数分别绘制出矩形、圆形、椭圆形和任意多边形的剪切区域。
6.1.1 矩形剪切inset()55 56
inset()函数接收4个长度参数，类似相对定位时指定的top、right、bottom、right，含义是剪切的矩形边缘与元素边缘的距离。
6.1.2 圆形剪切circle() 57
circle()函数接收两个参数，第1个参数表示圆的半径，第2个参数表示圆心所在的位置，第2个参数以单词at开头。
6.1.3 椭圆形剪切ellipse()58
ellipse()函数接收3个参数，分别是椭圆的水平半径、垂直半径和圆心位置。
6.1.4 多边形剪切polygon()59 60
polygon()函数的参数比前几个都简单，但却可以绘制任意的多边形剪切区域。它的参数值是任意多的坐标值，坐标相对于元素左上角定位，各坐标之间用逗号分隔。
6.2 滤镜filter
滤镜的多个函数能从颜色、模糊度、亮度等多个角度修改元素的视觉效果
6.2.1 透明度滤镜opacity()61
opacity()函数接收的参数值是一个从0到1之间的数值，0表示完全透明，1表示不透明，它和RGBA/HSLA模式中的“A”的含义相同。
6.2.2 模糊滤镜blur()62
blur()函数接收的参数是一个长度值，表示模糊半径。盒阴影属性box-shadow也接收一个模糊半径参数，两者的区别在于，box-shadow是在元素的边缘进行模糊处理，而blur()函数则是对整个元素进行模糊处理。
6.2.3 色相滤镜hue-rotate()63
hue-rotate()函数接收一个角度值作为参数，它的含义是将色相环旋转多少度，此值可正可负，正值表示沿色相环顺时间方向寻找色值，负值则表示沿色相环逆时针方向寻找色值。
6.2.4 亮度滤镜brightness()64 65
brightness()函数接收一个数值或百分比值作为参数，表示相对于当前的亮度（当前亮度为1或100%）的变化程度。若值大于1，则元素变得更亮；若值小于1，则元素变得更暗。
6.2.5 对比度滤镜contrast()66 67
contrast()函数接收一个数值或百分比值作为参数，表示相对于当前的对比度（当前对比度为1或100%）的变化程度。若值大于1，则元素对比度变得更高；若值小于1，则元素对比度变得更低。对比度是元素黑与白的比值，比值越大，亮色就向白色靠拢，暗色就向黑色靠拢；比值越小，黑色和白色都向灰色靠拢。
在艺术设计中，对比是经常采用的表现手法，所以使用对比度滤镜时，增大对比度比减小对比度有更多的应用场景，例如由于颜色混合模式对纯白和纯黑很敏感，经常在使用一些颜色混合模式的同时增大对比度，使图案获得更剧烈的变化效果。
6.2.6 多重滤镜68
可以在一个filter属性中同时应用多个滤镜，多个函数之间用空格分隔。
opacity()和blur()滤镜多用在动画中，制作淡入淡出效果，令元素呈现缓缓退出；hue-rotate()和brightness()滤镜一般是为了获得与原有颜色相协调的新颜色，在原有颜色的基础上，通过微调色相或亮度，得到一个和原有颜色接近的新颜色；contract()滤镜则通过增强对比度来强化艺术效果。
6.3 色彩混合
颜色混合模式mix-blend-mode用于将两个图层的颜色融合在一起，混合的模式一共有16种，但是它们大多是对色值的数学运算，所以即使给出每个模式的定义，要预测一个图案应用这些模式的效果依然几乎是不可能的，大部分情况下，还是要一个一个试过模式之后才知道应该用哪一个。
6.3.1 multiply模式69
multiply模式类似于用染料绘画的效果，颜色重叠的效果就是multiply模式，图层合成之后的颜色通常比参与合成的颜色要深。如果参与合成的图层之一是白色，则合成色为另一个图层的颜色；如果参与合成的图层之一是黑色，则合成色为黑色。
6.3.2 screen模式70
screen模式类似于把多束光投影到屏幕上的效果，舞台上灯光的混合效果就是screen模式，图层合成之后的颜色通常比参与合成的颜色要亮。如果参与合成的图层之一是白色，则合成色为白色；如果参与合成的图层之一是黑色，则合成色为另一个图层的颜色。
multiply模式和screen模式几乎是两个相反的模式，在multiply模式下，叠加的图层越多，合成的颜色就越趋近于黑色，“越涂越黑”；在screen模式下，叠加的图层越多，合成的颜色就越趋近于白色，“越照越亮”。
6.3.3 difference模式71
在difference模式下，一个图层的白色部分会合成为另一个图层的反色，黑色部分则保留另一个图层本身的颜色。
6.3.4 color-dodge模式72
在color-dodge模式，一个图层的白色部分会加亮另一个图层，黑色部分合成为另一个图层本身的颜色。
6.4 项目应用
6.4.1 项目一：莲花73
.
6.4.2 项目二：彭罗斯三角形74
.
第7章 变量与计数器
变量与计数器虽然不直接生成视觉效果，但熟练使用它们可以让代码更加精炼、抽象，减少代码量，提升代码的表达力。
7.1 变量
在所有编程语言中，变量都是不可或缺的，而CSS直到CSS3终于有了自己的变量语法。
7.1.1 声明和引用变量75 76 77
变量用两条短横线–声明，如“–color: deepskyblue”，即声明了一个名为–color的变量，它的值为deepskyblue。和样式类名一样，变量名区分大小写，变量名中可以使用连字符。读取变量值的语法是使用var()函数，参数值即是变量名，如background-color: var(–color)，把变量–color的值deepskyblue赋给background-color属性。
和其他编程语言的变量一样，CSS变量也有作用域的概念，元素可以从它的父级继承变量，也就是说，在一个容器中定义的变量，可以在它的子元素中引用，但不能在它的同级元素和上级元素中引用。当在元素所处的多个变量域中定义同名的变量时，则取距离元素最近的那个变量域的变量值。就像元素是DOM结构的顶级一样，CSS的顶级有一个名为:root的元素。
7.1.2 表达式78 79 80
除变量之外，CSS的属性值也可以是表达式，但表达式不能直接写出，例如2倍长的5em，不能直接写成5em2，必须要把它放在calc()函数中，写作calc(5em2)。
因为CSS语法的特点，经常要用一些数值作为属性值，对于稍微复杂一些的场景，这个值可能不是一望即知的，而是经过一些运算得到的，这时，应该把它改写为表达式，体现出计算过程和设计思路，便于提高语义化，增强可读性。
表达式中可以使用+、-、*、/四则运算，也可以使用括号。因为大部分运算数允许使用负值，所以加减运算的运算符左右要加空格，乘除法没有这个要求，但为了统一和增强可读性，建议所有运算符左右都加空格。
表达式除了可以计算长度、百分比值之外，还可以计算角度。
7.1.3 批量描述一组元素的样式81
在创作过程中，经常会处理一组相似的元素，它们的一些属性有规律地变化，由此构成一个图案
7.2 计数器
7.2.1 计数器的声明、累加和读取82
计数器的完整语法包括3个语句：定义计数器counter-reset、计数器累加counter-increment、读取计数器的值content:counter(n)。
7.2.2 计数器初始值和步长83
变量声明语句counter-reset中声明的变量的默认值是0，可以为它指定一个明确的值作为初始值。
变量累加语句也可以接收一个参数表示步长，所谓步长就是每次累加时要间隔几个数
步长也可以是负值
7.2.3 计数器的序列值84
计数器的值默认情况是整数，但也可以是其他有序序列。
7.2.4 用计数器设计一个字母表85
7.3 项目应用
7.3.1 项目一：监控眼86
.
7.3.2 项目二：纸鹤87
.
第8章 变换
属性transform可以把元素平移、旋转、缩放、扭曲，除平移的效果和定位类似之外，其他效果都是这个属性独有的能力，通过其他属性，再结合这些变换函数，能获得更丰富的视觉效果。
8.1 变换函数
8.1.1 平移函数translate()[^eg88] [^eg89] [^eg90]
平移即令元素沿水平方向或垂直方向移动，除位置被改变之外，元素本身不发生变化，这和定位类似，但也有很多不一样的地方
水平平移的函数是translateX()，垂直平移的函数是translateY()，函数名不区分大小写，但是为了强调是沿哪条轴线移动，一般把其中的“X”和“Y”大写。
严格地说，translate的参数值为正并不是指元素向右移动，而是指元素沿轴的正向移动，因为默认情况下X轴是向右的，所以属性值为正即是向右移动，但轴的方向是可以被改变的，如果X轴被旋转了45°（向右下方旋转），那属性值为正时意味着元素将向右下移动，属性值为负时将向左上移动。
案例1
↩︎案例2
↩︎案例3
↩︎案例4
↩︎案例5
↩︎案例6
↩︎案例7
↩︎案例8
↩︎案例9
↩︎案例10
↩︎案例11
↩︎案例12
↩︎案例13
↩︎案例14
↩︎案例16
↩︎案例17
↩︎案例18
↩︎案例19
↩︎案例20
↩︎案例21
↩︎案例22
↩︎案例23
↩︎案例24
↩︎案例25
↩︎案例26
↩︎案例27
↩︎案例28
↩︎案例29
↩︎案例30
↩︎案例31
↩︎案例32
↩︎案例33
↩︎案例34
↩︎案例35
↩︎案例36
↩︎案例37
↩︎案例38
↩︎案例39
↩︎案例40
↩︎案例41
↩︎案例42
↩︎案例43
↩︎案例44
↩︎案例45
↩︎案例46
↩︎案例47
↩︎案例48
↩︎案例49
↩︎案例50
↩︎案例51
↩︎案例52
↩︎案例53
↩︎案例54
↩︎案例55
↩︎案例56
↩︎案例57
↩︎案例58
↩︎案例59
↩︎案例60
↩︎案例61
↩︎案例62
↩︎案例63
↩︎案例64
↩︎案例65
↩︎案例66
↩︎案例67
↩︎案例68
↩︎案例69
↩︎案例70
↩︎案例71
↩︎案例72
↩︎案例73
↩︎案例74
↩︎案例75
↩︎案例76
↩︎案例77
↩︎案例78
↩︎案例79
↩︎案例80
↩︎案例81
↩︎案例82
↩︎案例83
↩︎案例84
↩︎案例85
↩︎案例86
↩︎案例87
↩︎
