要实现斜边阴影，需使用伪元素结合transform和filter；1. 创建伪元素并设置position: absolute和z-index: -1使其位于主体下方；2. 设置伪元素宽高与主体一致，并用background-color定义阴影颜色；3. 使用transform: skewx()或skewy()对伪元素进行倾斜变形；4. 通过transform-origin调整倾斜的基准点以控制阴影方向；5. 添加filter: blur()使阴影边缘柔和，提升真实感；6. 微调top、left等属性优化阴影位置；因box-shadow基于元素原始矩形边界，无法随变形同步倾斜，故必须采用此“模拟”方式实现斜边阴影效果。
CSS中要实现元素看起来有斜边阴影的效果，我们通常不会直接用传统的
box-shadow
，因为它只能在元素的矩形边界周围创建均匀的阴影。更实际的做法是利用
transform
属性，特别是
skew()
函数，结合伪元素或一个独立的阴影层来模拟这种视觉效果。这就像是给元素后面藏了一个被“推歪”的影子。
解决方案
要实现一个元素的斜边阴影，一个非常直接且常用的方法是使用伪元素（
::before
或
::after
）作为阴影层，然后对其应用
transform: skewX()
或
skewY()
。
.skewed-shadow-box { position: relative; /* 确保伪元素能基于此定位 */ width: 200px; height: 100px; background-color: #4CAF50; /* 主体颜色 */ margin: 50px auto; /* 居中显示，方便观察 */ display: flex; justify-content: center; align-items: center; color: white; font-size: 1.5em; font-weight: bold; overflow: hidden; /* 避免阴影溢出时影响布局，虽然这里不太会 */ } .skewed-shadow-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); /* 阴影颜色 */ z-index: -1; /* 放在主体元素下方 */ transform: skewX(-15deg); /* 向左倾斜15度 */ /* transform-origin: bottom right; */ /* 尝试不同的原点，效果会很不一样 */ filter: blur(5px); /* 给阴影一点模糊效果，更自然 */ /* 也可以尝试 box-shadow 来模拟，但 drop-shadow 更灵活 */ /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); */ } /* 另一种斜切方向，比如向右下倾斜的阴影 */ .skewed-shadow-box.right-skew::before { transform: skewX(15deg); /* 向右倾斜 */ transform-origin: bottom left; /* 从左下角开始倾斜 */ } /* 如果想做Y轴的斜切 */ .skewed-shadow-box.y-skew::before { transform: skewY(10deg); /* 向上倾斜 */ transform-origin: top left; }
这段代码的核心思路是：给主元素一个相对定位，然后它的伪元素就有了绝对定位的参考。这个伪元素会和主元素一样大，但被放在主元素下面（
z-index: -1
）。接着，我们对这个伪元素应用
transform: skewX()
或
skewY()
，让它看起来像是被推歪了的影子。
filter: blur()
能让阴影更柔和，
background-color
就是阴影的颜色。
立即学习“前端免费学习笔记（深入）”；
为什么传统的box-shadow无法直接实现斜边阴影？
你可能会想，既然CSS有
box-shadow
，为什么不直接用它来做斜边阴影呢？这是个好问题，而且它揭示了
box-shadow
的一个基本限制。
box-shadow
，顾名思义，它创建的是一个“盒子”的阴影。这个“盒子”指的就是元素本身的边框盒（border-box）或内边距盒（padding-box）的投影。无论你的元素内容如何变形，
box-shadow
总是围绕着元素最初的、未变形的矩形边界来生成阴影。它不关心
transform
对元素本身形状的改变。
比如说，你有一个
div
，你用
transform: skewX(20deg)
把它斜切了，它看起来确实是斜的。但如果你给它加一个
box-shadow
，你会发现阴影仍然是一个规规矩矩的矩形，只是稍微偏移了一下，它不会跟着你的
div
一起“歪”掉。这就像你站在一个倾斜的房子旁边，你的影子还是笔直的，因为它投射在地面上，而不是房子本身。
所以，
box-shadow
的局限性在于，它是一个二维的、基于原始边界的投影效果，无法模拟透视或非矩形形状的阴影。要实现斜边阴影，我们就得“曲线救国”，自己创建一个独立的“影子”元素，然后去变形它。
transform: skew() 与 transform-origin 在斜边阴影中的作用与技巧
在实现斜边阴影时，
transform: skew()
和
transform-origin
是两个非常关键的属性，它们决定了阴影的倾斜方向、角度以及倾斜的“支点”，这直接影响了最终的视觉效果。
transform: skew(angle)
或
skewX(angle)
、
skewY(angle)
：
-
skewX(angle)
：使元素沿着X轴倾斜，你可以想象元素顶部被向左或向右“推”了。正值会使顶部向右倾斜，负值向左。
-
skewY(angle)
：使元素沿着Y轴倾斜，想象元素左侧被向上或向下“推”了。正值会使左侧向下倾斜，负值向上。
- 选择哪个取决于你希望阴影是水平方向还是垂直方向的倾斜。通常，我们更多用到
skewX
来模拟物体的侧面投影。
transform-origin
： 这是我个人觉得在玩转
transform
时最容易被忽视，但又至关重要的一点。它定义了元素变形的“原点”或“轴心”。默认情况下，
transform-origin
是
center center
（或
50% 50%
），这意味着元素会围绕其中心点进行变形。
但在斜边阴影的场景中，我们往往不希望阴影从中心开始倾斜，而是希望它从某个边缘开始倾斜，这样才能更好地模拟光线投射下的真实阴影。
举个例子： 如果你想让阴影看起来像是从元素的右下角向左上角延伸，那么你可能需要设置
transform-origin: bottom right;
。这样，当伪元素被
skewX(-15deg)
时，它的右下角是固定的，而其他部分则围绕这个点倾斜，形成一种“从右下角延伸出去”的视觉效果。
/* 示例：从底部中心向左倾斜的阴影 */ .skewed-shadow-box.bottom-left-skew::before { transform: skewX(-10deg); transform-origin: bottom center; /* 关键：从底部中间开始倾斜 */ left: -5px; /* 适当调整位置，让阴影更贴合 */ top: 5px; }
通过调整
transform-origin
的值（如
top left
,
bottom right
,
center center
，或者具体的像素/百分比），你可以精确控制阴影的“生长”方向和视觉焦点，这给了你很大的设计自由度。多尝试不同的组合，你会发现很多意想不到的效果。
实现斜边阴影时可能遇到的挑战与优化策略
虽然使用
transform: skew()
实现斜边阴影效果很酷，但在实际应用中，你可能会遇到一些小麻烦，或者需要考虑如何让它表现得更好。
1. 阴影与主体元素的对齐和偏移： 伪元素作为阴影，它默认会和主体元素完全重合。但斜切之后，它可能不再完美地“贴合”在主体下方。你可能需要通过调整伪元素的
top
,
left
,
right
,
bottom
属性，或者
margin
，来微调阴影的位置，让它看起来更自然。这通常需要一些肉眼调试，没有一个万能的公式。
2. 阴影的模糊与颜色： 纯色的斜切阴影可能会显得有点生硬。使用
filter: blur()
给阴影增加模糊效果，可以使其看起来更柔和，更像真实世界的光影。同时，阴影的颜色和透明度（
rgba()
）也很重要，它们应该与背景色和主体颜色协调，避免显得突兀。
3.
filter: drop-shadow()
vs
box-shadow
在伪元素上： 在上面的解决方案中，我直接给伪元素设置了
background-color
并进行了模糊。你也可以尝试在伪元素上使用
box-shadow
。但如果你的主体元素本身不是一个简单的矩形（比如它有圆角，或者是一个
clip-path
剪裁出来的形状），那么
box-shadow
在伪元素上依然会生成矩形阴影。
这时候，
filter: drop-shadow()
就显得非常强大了。
drop-shadow()
能像
box-shadow
一样创建阴影，但它会考虑元素的透明度，这意味着它能为非矩形、透明背景的元素（比如PNG图片或SVG图标）创建更真实的阴影。如果你想让斜切阴影更“智能”地跟随主体元素的复杂形状，你可以尝试将
drop-shadow()
应用到伪元素上（或者直接应用到主体元素上，并结合
transform
来模拟斜切，但这通常不如伪元素灵活）。
/* 示例：使用drop-shadow模拟斜切阴影，但通常是给主体元素用 */ /* 如果要给伪元素用，伪元素本身需要有形状 */ .skewed-shadow-box.with-drop-shadow::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; /* 伪元素本身不显示 */ z-index: -1; transform: skewX(-15deg); /* drop-shadow会根据伪元素自身的形状（如果它有）来创建阴影 */ /* 但通常我们直接给伪元素一个背景色，然后模糊，更简单 */ filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4)); /* 这种用法更常见于给有透明度的图片或SVG加阴影 */ }
通常，直接给伪元素一个半透明的
background-color
并配合
filter: blur()
，再进行
skew
变形，是实现斜边阴影最简单也最有效的方式。
drop-shadow
更多用于复杂形状元素的阴影。
4. 性能考量：
transform
通常是GPU加速的，所以对于简单的斜边阴影效果，性能影响微乎其微。但如果页面上有大量复杂的动画和变形，或者你叠加了太多
filter
效果，还是有可能影响性能的。在绝大多数场景下，你不需要为此过多担心。
5. 响应式调整： 在不同屏幕尺寸下，你可能需要调整
skew
的角度或者阴影的偏移量，以保持最佳的视觉效果。这可以通过媒体查询（
@media
）来实现。
总的来说，实现斜边阴影是一个很好的机会，让你深入理解
transform
和伪元素的强大组合。它不是一个开箱即用的属性，而是需要一点点“手动”搭建的视觉效果。
评论（已关闭）
评论已关闭