CSS阴影 box-shadow CSS 是添加阴影最常见的方法box-shadow，但还有许多其他技术和方法。阴影的处理不仅是页面中的一个重要主题，也是逐年变化的设计趋势中的一个重要主题。例如，可以利用影子技术的独特表现有很多，比如前段时间流行的长影子和Neumorphism（软UI）。使用 CSS 创建的长阴影（图像顶部）和同态（图像底部）基本的盒子阴影这是用 CSS 添加阴影的最基本属性box-shadow。box-shadow ，允许您为元素的框区域（边框和内部）绘制阴影。box-shadow:inset h-shadow v-shadow blur spread color ; inset 可选。从外层的阴影（开始时）改变阴影内侧阴影 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表仅用这个基本形式就可以实现多种表现方式。/* 1. 基本 box-shadow */ .basic1 { box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5); } /* 2. inset内阴影 */ .basic2 { box-shadow: inset 0 10px 25px 0 rgba(0, 0, 0, .5); } /* 3. 阴影透明度 */ .basic3 { box-shadow: 0 10px 25px 0 rgba(60, 194, 235, 0.5); } /* 4. 模糊为0，也可以表现为边框 */ .basic4 { box-shadow: 15px 15px 0px 0 rgb(60, 194, 235); }叠加多个阴影/* 1. 用6层box-shadow制作的平滑阴影 */ .layer1 { box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057), 0 5px 6.1px rgba(0, 0, 0, 0.076), 0 10.1px 11.4px rgba(0, 0, 0, 0.086), 0 19.2px 19.8px rgba(0, 0, 0, 0.092), 0 38.4px 34.8px rgba(0, 0, 0, 0.1), 0 101px 74px rgba(0, 0, 0, 0.13); } /* 2. 对每个阴影应用不同方向和颜色的例子 */ .layer2 { box-shadow: -10px 10px 25px rgba(230, 180, 15, 0.9), 10px -10px 25px rgba(8, 131, 161, 0.9) } /* 3. 重叠着不模糊的影子，纸重叠在一起的表现 */ .layer3 { box-shadow: 0 20px 0 -10px rgb(198, 224, 231), 0 40px 0 -20px rgb(105, 171, 209), 0 60px 0 -30px rgb(27, 115, 165) }乍一看，分层多个阴影似乎是一种特殊的技术。然而，如果你仔细观察，你会发现它经常被用在你日常经常看到的设计中。仅用 box-shadow 是无法完美的！ 使用伪元素的原始阴影box-shadow很容易，但有很多事情因为它的简单而你无法做到。 下图（左）显示了在方格图案上投射的box-shadow浅蓝色。 根据表现的不同，这是可能的，但我认为右边的影子作为影子更真实。使用伪元素创建逼真的阴影box-shadow因为它只是模糊指定的颜色框，所以根据阴影颜色和背景的组合，阴影可能看起来不自然。 为了使阴影看起来更自然filter，mix-blend-mode可以使用 CSS 和。 (*请注意filter，mix-blend-mode不支持IE).box::after { /* 用模拟元素制作相同大小的box，用position:absolute显示在背面 */ content: ''; display: block; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; /* ①用阴影颜色填充伪元素框 */ background-color: rgb(42, 159, 226); /* ②用模糊过滤器模糊 */ filter: blur(15px); /* ③调整位置和尺寸 */ transform: translateY(10px) scale(1.05); /* ④用乘法重叠 */ mix-blend-mode: multiply; }① 用阴影颜色填充伪元素，② 使用模糊滤镜模糊它们，③ 调整位置和大小，④ 最后使用乘法将它们组合起来。比只一行字box-shadow麻烦多了。另一方面，它还有允许自由定制的优点，例如调整伪元素的形状和大小以及使用不同的滤镜。让我们看一些例子。为渐变和图像添加阴影box-shadow与阴影颜色不同，您可以在伪元素的背景上显示任何您喜欢的内容，无论是渐变还是图像。通过模糊此阴影来创建阴影，您可以创建与网站的配色方案和背景图像相匹配的令人印象深刻的阴影。尝试混合模式正片叠底最适合常规、逼真的阴影，但您可以通过尝试不同的混合模式来创造更多效果。1.(mix-blend mode: color-dodge)2.(mix-blend mode: color=burn)3.(mix-blend-mode: hard-light)常用的mix-blend-mode值normal: 正常混合模式，不会产生混合效果。multiply: 正片叠底模式，会让重叠的部分颜色变得更暗。screen: 滤色模式，与正片叠底相反，重叠部分会变得更亮。overlay: 叠加模式，根据背景色的明暗进行混合，背景亮则变亮，背景暗则变暗。darken: 变暗模式，选取两层中的较暗颜色作为混合色。lighten: 变亮模式，选取两层中的较亮颜色为混合色。color-dodge: 颜色减淡模式，通过降低对比度使背景色减淡。color-burn: 颜色加深模式，通过增加对比度使背景色加深。hard-light: 强光模式，类似于叠加，但对比度更高。soft-light: 柔光模式，类似于强光，但效果更柔和。如上例所示，您color-dodge可以使用减淡 ( ) 来表达发光，或者使用加深 ( color-burn) 或叠加 ( overlay) 添加生动的阴影，或者通过组合背景和阴影来创建各种表现。另一种阴影：投影还有一件事你不应该忘记drop-shadow。box-shadow，它在元素周围的矩形区域上投射阴影，drop-shadow效果更好，因为它生成的阴影与元素的实际绘制内容相匹配。 “绘图内容”包括位图和 SVG 等图像、文本、子元素等一切内容。当您想要向所看到的形状添加阴影drop-shadow时使用。看起来就像 box-shadow，但有一点不同drop-shadow是CSS过滤器的一种，所以写法略有不同，但是box-shadow可以设置filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();filter: drop-shadow(10px 10px 5px rgb(0, 0, 0))然而，有一些差异需要注意。即使指定相同的值，阴影的外观box-shadow也不会匹配。即使形状只是一个矩形。这是因为box-shadow和drop-shadow的第三模糊量的计算方法不同。当值相同时，drop-shadow看起来更模糊box-shadow关键字不能inset用于drop-shadowbox-shadow可以指定为第四个数字的扩展半径drop-shadow不能与 一起使用。如果指定，主要浏览器会认为整个内容0无效drop-shadow，因此不应指定。drop-shadow（CSS 过滤器）在 IE 中不可用。 （还有一种方法是使用原始扩展filter: progid:DXImageTransform.Microsoft.DropShadow，但本文不会解释。）box-shadow下图是相同参数值设置下的drop-shadow对比。虽然它们很相似，但不能简单地替换，因此在需要设计和编码之间高度一致性的情况下必须小心。如果你担心阴影重叠，可以用投影来解决它对于图像、SVG 徽标等很有用drop-shadow，但这不是唯一的用途。下一个示例是使用 CSS 动画制作的加载旋转器。通过旋转8 个圆圈（元素）创建动画。在两个旋转器中，box-shadow带有阴影的那个是左侧的那个。有一些区别值得关注。每个圆圈都有一个阴影，因此重叠的圆圈看起来并不连为一体。由于阴影是旋转的，因此阴影的角度会发生变化。另一方面，在右侧drop-shadow，整个图像都有阴影。您可以看到，通过一次向多个旋转图像添加阴影可以避免上述问题。“当我将使用 box-shadow 投射阴影的元素靠近放置时，阴影会重叠！在这种情况下，drop-shadow您也许可以通过使用 box-shadow 来解决该问题。 ”一些问题和解决方法box-shadow虽然它易于使用并且允许多种表达方式drop-shadow，但由于它内部执行复杂的绘图计算，因此很容易出现麻烦。阴影动画有些断断续续（Safari）box-shadow我认为在很多情况下，您希望使用它来在元素悬停时添加浮动效果。如果您不假思索地在这样的场景中制作动画box-shadow，transition则阴影部分的动画可能会显得卡顿（帧速率降低）。这种现象主要box-shadow发生在阴影绘制区域发生变化时，例如改变模糊半径。尽管绘图不会完全相同，但如果平滑度很重要，则可以通过不更改模糊半径和设置透明度动画来避免此问题。/* 1. 在轨迹中更改阴影的模糊半径 */ .box1{ transition: box-shadow 2s ease-out, transform 2s ease-out; } .box1:hover { box-shadow: 0 15px 10px 5px rgb(0, 0, 0); transform: translateY(-10px); } /* 2. 仅在轨迹中更改阴影透明度 */ .box2{ transition: box-shadow 2s ease-out, transform 2s ease-out; box-shadow: 0 15px 10px 5px rgba(0, 0, 0, 0); } .box2:hover { box-shadow: 0 15px 10px 5px rgba(0, 0, 0, 1); transform: translateY(-10px); }当悬停时投射阴影时，周围区域会丢失（Safari）悬停时drop-shadow也会出现问题。在动画期间不显示阴影 (Safari)

CSS Transform 介绍（2D 版） 什么是 CSS 变换？CSS Transform 是作为在网页上快速绘制高级显示和动画的规范而创建的。变换基础知识（2D）有四种基本的 CSS 变换：平移、旋转、缩放和倾斜。通过组合这四种变换操作，您可以自由地移动元素。 虽然本文仅限于 2D 变换，但 CSS Transform 也可以执行伪 3D 变换。基础知识是相同的，所以让我们首先了解 2D 变换。基本操作translate:水平移动rotate:旋转scale:放大缩小skew:倾斜变形对于旋转以外的三个操作，有两种方法分别指定XY，或者一次指定它们。 基本上没有什么违反直觉的地方，只是偏差不同。 即使你像这样分解它，含义也不会改变，translate(100px, 200px)但它是与不同的转换。 skew本身使用频率并不高，所以没必要强迫自己去记住它，但是遇到问题的时候请记住它。translateX(100px) translateY(200px) skew(30deg, 15deg)skewX(30deg) skewY(30deg)translate(200px，100px) X方向Y方向translate(200px) translate(200px,0)translateX(200px)translateY(100px)合并操作基本转换操作可以任意组合使用。 以下示例将元素缩放 2 倍并顺时针旋转 45 度。#charactor { transform: rotate(45deg) scale(2); }还可以多次编写相同类型的转换。transform 可以在中编写多个变换操作，但必须注意顺序。translate rotate scale变形参考点除了合成顺序之外，一个重要元素是转换的参考点。 旋转和缩放是使用元素的中心作为参考隐式执行的，但实际上， 经常使用中心以外的参考。这可以在这种情况下使用 transform-origin transform-origin 是一个经常使用的有用功能，但它本身并不是一个特殊功能，就像translate移动操作的简写。 transform-origin: left top; X方向 Y方向 transform-origin: 50% 100%; transform-origin: 50px -100px#### 聚合操作 matrix transform您可以在 中编写任意数量的操作，因此乍一看，根据操作的数量，处理可能会变得越来越繁重。 实际上，多个变换操作一次聚合为一个变换操作matrix，并且该值（矩阵）用于一次执行所有变换操作。使用这种矩阵的图像变换称为仿射变换，广泛应用于图像处理领域。 transform: rotate(30deg) translate(100px, 100px) 转换为 transform: matrix(0.866,0.5,-0.5,0.866, 36.6,136.6) 浏览器本身会为您进行矩阵计算，因此您通常不需要了解如何计算它们。然而，重要的是要知道在这些矩阵计算中，多个变换操作被合并为一个。### CSS Transform 的常见问题 #### 添加 Transform 但是不起作用 同时添加多个分开的属性 会被覆盖掉此时需要写成一个/* 上偏移 */ .float { transform: translateY(-100px); } /* 倾斜 */ .tilt { transform: skewX(30deg); } /* 两个公用 */ .float.tilt { transform: translateY(-100px) skewX(30deg); }

CSS渐变 使用 CSS 创建渐变已经有一段时间了，但我认为很多人只是连接两种颜色。 或者也许您只是用生成器复制并粘贴它？事实上，通过将值设置得更细，您可以获得更丰富的表达，而不仅仅是渐变。如果你想一想，你可以只使用 CSS 来表达这样的东西。使用手动 CSS 实现应用程序示例的后半部分很困难，因此我使用 SCSS 编写它。使用SCSS可以让您顺利地执行单独使用CSS难以完成的处理，并且使用mixin功能很方便，因为它省去了您输入数据的麻烦。CSS 渐变类型由于 CSS 渐变处理颜色，background-color因此很容易使用属性，但background-image它们是值。此外，根据渐变的形状，有以下六个值。linear-gradient()：线性渐变repeating-linear-gradient()：重复线性渐变radial-gradient()：径向渐变repeating-radial-gradient()：重复径向渐变conic-gradient()：扇形渐变repeating-conic-gradient()：重复扇形渐变其中，除了 之外，conic-gradient()所有这些都repeating-conic-gradient()可以与现代浏览器一起使用。截至 2020 年 2 月，扇形渐变仅受 Google Chrome、Safari 和 Edge 79 或更高版本支持。CSS渐变的基本编写方法最简单的编写方法是指定两种颜色。background-image: linear-gradient(#f4c14e, #d36950);通过添加颜色，您可以使用该颜色创建渐变。background-image: linear-gradient(#6fb8d9, #f4c14e, #d36950);它从蓝色变为黄色，再变为橙色。这里的关键点是指定的颜色均匀分布并且变化是线性的（两种颜色之间距离的中点是两种颜色之间的中点）。指定方向 占比您可以通过指定路径点来更改颜色分布。具体来说，在颜色后指定 % 或 px。background-image: linear-gradient(#6fb8d9 50%, #f4c14e 80%, #d36950 90%);如果按照上面的方式指定，0%〜50%从顶部开始的位置将为蓝色，80%该位置将为黄色，该位置90%〜100%将为橙色。此外，由于您可以指定航路点的开始和结束位置，因此也可以实现带状渐变。background-image: linear-gradient(#6fb8d9 0% 30%, #f4c14e 40% 70%, #d36950 80% 100%);当这样指定时0%〜30%，40%〜70%,80%〜100%部分将用纯色填充，30%〜40%,70%〜80%部分将用渐变填充。如果应用此并消除渐变部分，将创建条纹图案。background-image: linear-gradient(#6fb8d9 0% 30%, #f4c14e 30% 70%, #d36950 70% 100%);以上是线性渐变和径向渐变通用的符号。从这里，我们将解释线性和径向渐变的单独符号。线性梯度 渐变对于线性渐变，可以通过在开始时传递渐变方向（角度）来改变渐变的方向。 background-image: linear-gradient(45deg, #f4c14e, #d36950); background-image: linear-gradient(to bottom, #f4c14e, #d36950);45deg如果您指定 ，它将从左下角到右上角以 45 度角从黄色渐变到橙色。默认值为 180 度。除了指定频率外，to bottom to top to left to right还可以通过关键字（如字符）来指定。径向渐变形状和起始位置径向渐变允许您指定渐变的形状而不是角度。除非另有指定，否则渐变将是适合元素矩形的椭圆形。 （添加Viaway点是为了更容易理解渐变的形状）background-image: radial-gradient(#f4c14e 0% 40%, #d36950 60% 100%);默认关键字值为ellipse。circle牢记关键词，使渐变形状成为完美的圆形。background-image: radial-gradient(circle, #f4c14e 0% 40%, #d36950 60% 100%);渐变的形状现在是一个完美的圆形。您还可以使用进一步的语法at x坐标 y坐标将其插入到 shape 关键字之后来指定起始位置。background-image: radial-gradient(circle at 100px 200px, #f4c14e 0% 40%, #d36950 60% 100%);改变起始位置后，圆圈变大并被切断。这是因为默认情况下，灰度变化的程度是根据距圆心最远的顶点确定的。在上面的示例中，矩形的右下顶点100%就是值。100%有四个关键字指定这部分。您可以通过在形状后面插入该关键字来更改它。如果您使用在最近的边缘终止的关键字，closest-side它将如下所示：background-image: radial-gradient(circle closest-side at 100px 200px, #f4c14e 0% 40%, #d36950 60% 100%)可以使用以下四个关键字来指定结束。closest-side：在最靠近中心的一侧结束（椭圆的垂直和水平侧）closest-corner：将最靠近中心的顶点作为末端farthest-side：将距离中心最远的边缘（椭圆形的垂直和水平边缘）作为末端farthest-corner：将距离中心最远的顶点作为末端（默认值）下图显示了每个关键字。径向渐变的语法有点复杂，但看起来像这样：background-image: radial-gradient(形状 末端的关键字at x坐标 y坐标，颜色的经由点);重复梯度渐变CSS 渐变还包括重复渐变。repeating-linear-gradient()就是repeating-radial-gradient()这样。参数与基本线性/径向渐变相同，但不同之处在于路点是通过无限重复来填充的。background-image: repeating-linear-gradient(#f4c14e 0%, #d36950 50%);在上面的示例中50%，仅指定了该点之前的路点，但在该点之后将重复并填充渐变。 （从基本linear-gradient()情况50%开始，将全部为橙色）repeating-radial-gradient()也是如此。如果我们重复之前所说的话background-image: repeating-radial-gradient(circle closest-side at 100px 200px, #f4c14e, #d36950);closest-side被指定，因此它将是直到最近左侧的渐变的一个周期。相同的渐变以同心圆形式展开。您可以通过更改航路点的值来调整重复频率。您还可以使用开头介绍的纯色规范方法来创建条纹图案。background-image: repeating-linear-gradient(45deg, #f4c14e 0%　10%,　transparent 10% 20%);指定多个渐变虽然它不是CSS渐变本身的设置，但background-image属性可以指定用逗号分隔的多个值。您还可以使用它来创建如下所示的模式。background-image: radial-gradient(circle closest-side, white 0% 65%, transparent 65% 100%), repeating-linear-gradient(90deg, #f4c14e 0 4.8%, transparent 4.8% 9.6%);使用函数曲线的 CSS 渐变基于CSS渐变的这些特点，我们将进入高级版本。通过使用函数曲线更改路点，您可以创建定期变化的渐变。准确地说，gradient两种颜色之间的变化是线性的，因此曲线是由许多直线来近似的。使用回旋曲线的透明渐变粗略地说，回旋曲线是一条柔和地连接直线和曲线的曲线。由于其特性，它也用于高速公路立交环路。通过轻轻地从直线过渡到曲线，您不必进行突然的转向动作。如果将其应用于渐变，所需的颜色将平滑变化。比如透明度从无色增加到黑色的时候，用正常的渐变，一直到最后看起来都是灰色的，感觉就像只是到最后才变成黑色。但是，如果使用回旋曲线，颜色会自然变为黑色。上面的回旋梯度可以用 CSS 表示如下。background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.595) 50%, rgba(0, 0, 0, 0.7225) 65%, rgba(0, 0, 0, 0.78625) 75.5%, rgba(0, 0, 0, 0.81855) 82.85%, rgba(0, 0, 0, 0.83385) 88%, rgba(0, 0, 0, 0.85)); }0这次我们将改变透明度0.85，但是通过精细地设置值，您可以表达回旋曲线。不过每次都写这么复杂的东西太痛苦了，所以我准备了一个sass mixin。@mixin clothoid-linear-gradient( $angle: to bottom, $color-start: #000000, $color-end: #ffffff, $start-point: 0 ) { background-image: linear-gradient( $angle, $color-start 0 $start-point * 100%, mix($color-end, $color-start, 70%) $start-point * 100% + (1 - $start-point) * 50%, mix($color-end, $color-start, 85%) $start-point * 100% + (1 - $start-point) * 65%, mix($color-end, $color-start, 92.5%) $start-point * 100% + (1 - $start-point) * 75.5%, mix($color-end, $color-start, 96.3%) $start-point * 100% + (1 - $start-point) * 82.85%, mix($color-end, $color-start, 98.1%) $start-point * 100% + (1 - $start-point) * 88%, $color-end ); }使用它$color-start时$color-end您所要做的就是指定颜色。@include mixin.clothoid-linear-gradient($color-start: rgba(0,0,0,0), $color-end: rgba(0,0,0,0.85));使用三角函数的梯度我们还将介绍使用三角函数的分级，这是高中数学的秘密。三角曲线，特别是正弦曲线，被称为波浪曲线。由于函数的特性，变化率在开始时逐渐变化，中间变得陡峭，然后在末尾变得更加平缓。既然是周期函数，那么就是一条可以再次返回的变化曲线（=可以循环）。如果将其应用于渐变，则可以绘制波浪图案。background-image: repeating-radial-gradient(circle at center, #6fb8d9, #70b9da 1.25%, #73bcdd 2.5%, #78c0e1 3.75%, #7fc6e6 5%, #86cdec 6.25%, #8cd3f2 7.5%, #93d9f7 8.75%, #98ddfb 10%, #9be0fe 11.25%, #9ce1ff 12.5%, #9be0fe 13.75%, #98ddfb 15%, #93d9f7 16.25%, #8cd3f2 17.5%, #86cdec 18.75%, #7fc6e6 20%, #78c0e1 21.25%, #73bcdd 22.5%, #70b9da 23.75%, #6fb8d9 25%); @mixin repeating-sine-radial-gradient( $position: circle at center, $color-start: #000000, $color-end: #ffffff, $repetition: 1 ) { background-image: repeating-radial-gradient( $position, $color-start, mix($color-end, $color-start, 2.4%) calc(100 / $repetition) * 0.05%, mix($color-end, $color-start, 9.5%) calc(100 / $repetition) * 0.1%, mix($color-end, $color-start, 20.6%) calc(100 / $repetition) * 0.15%, mix($color-end, $color-start, 34.5%) calc(100 / $repetition) * 0.2%, mix($color-end, $color-start, 50%) calc(100 / $repetition) * 0.25%, mix($color-end, $color-start, 65.5%) calc(100 / $repetition) * 0.3%, mix($color-end, $color-start, 79.4%) calc(100 / $repetition) * 0.35%, mix($color-end, $color-start, 90.5%) calc(100 / $repetition) * 0.4%, mix($color-end, $color-start, 97.6%) calc(100 / $repetition) * 0.45%, $color-end calc(100 / $repetition) * 0.5%, mix($color-end, $color-start, 97.6%) calc(100 / $repetition) * 0.55%, mix($color-end, $color-start, 90.5%) calc(100 / $repetition) * 0.6%, mix($color-end, $color-start, 79.4%) calc(100 / $repetition) * 0.65%, mix($color-end, $color-start, 65.5%) calc(100 / $repetition) * 0.7%, mix($color-end, $color-start, 50%) calc(100 / $repetition) * 0.75%, mix($color-end, $color-start, 34.5%) calc(100 / $repetition) * 0.8%, mix($color-end, $color-start, 20.6%) calc(100 / $repetition) * 0.85%, mix($color-end, $color-start, 9.5%) calc(100 / $repetition) * 0.9%, mix($color-end, $color-start, 2.4%) calc(100 / $repetition) * 0.95%, $color-start calc(100 / $repetition) * 1% ); } @include mixin.repeating-sine-radial-gradient($color-start: #6fb8d9, $color-end: #9ce1ff, $repetition: 4)渐变案例方格图案我们能够通过改变变化程度来实现有趣的渐变，但通过将其与其他 CSS 属性相结合，甚至可以实现更多样化的表达。例如，您可以设置背景图像的混合级别，background-blend-mode这允许您执行类似的操作。background-image: repeating-linear-gradient(90deg, black 0 48px, white 48px 96px), repeating-linear-gradient(180deg, white 0 48px, black 48px 96px); background-blend-mode:difference;mix-blende-mode 使用回旋曲线的径向渐变来表达周边曝光，波纹动画与动画结合起来也很有趣。由于三角函数具有波形，因此它们也可以表示传播的波纹。条纹动画mask-image用于为条纹设置动画。各种组合的动画mix-blend-mode如果你结合 , mask-image，你可以做这样的事情。animation