css实现圆角图片阴影效果的核心是结合border-radius与box-shadow或filter: drop-shadow()；1. 基础方法使用border-radius加box-shadow，简单但阴影较生硬；2. 内外阴影结合通过添加inset内阴影增强立体感；3. 使用::before或::after伪元素可精准控制阴影位置和形状，需配合定位容器；4. filter: drop-shadow()能智能识别透明区域生成阴影，更自然但兼容性较差，尤其不支持ie；5. 可借助css变量统一管理样式，便于动态调整；6. 兼容性方面，border-radius和box-shadow主流浏览器支持良好，drop-shadow()需注意低版本浏览器适配；7. 替代方案还包括svg滤镜，可实现复杂效果但使用成本较高；实际开发中推荐优先使用box-shadow配合css变量，并根据需求选择伪元素或滤镜方案以达到最佳视觉效果。
其实，CSS实现圆角图片阴影效果并不难，核心就是利用border-radius来制造圆角，再结合box-shadow来添加阴影。不过，想要让阴影更自然、更具层次感，还是有一些小技巧的。
解决方案：
-
基础圆角 + 阴影： 这是最直接的方法。先用
border-radius给图片添加圆角，然后用box-shadow添加阴影。立即学习“前端免费学习笔记（深入）”；
img { border-radius: 10px; /* 圆角大小 */ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 水平偏移, 垂直偏移, 模糊半径, 颜色 */ }这种方式简单粗暴，但阴影可能显得比较生硬。
-
内外阴影结合： 为了增加层次感，可以尝试内外阴影结合。 内阴影用
inset关键字，外阴影正常设置。img { border-radius: 10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), /* 外阴影 */ inset 0 0 5px rgba(0, 0, 0, 0.2); /* 内阴影 */ }内阴影能模拟出一种“凹陷”的效果，让图片看起来更有立体感。
-
使用
::before或::after伪元素： 这种方式可以更灵活地控制阴影的形状和位置。 创建一个伪元素，设置和图片相同的圆角，然后添加阴影，并将其定位在图片下方。.image-container { /* 需要一个容器 */ position: relative; /* 容器需要定位 */ width: 200px; height: 200px; } .image-container img { border-radius: 10px; display: block; /* 消除图片下方可能出现的空白 */ width: 100%; height: 100%; object-fit: cover; /* 保证图片完整显示 */ } .image-container::before { content: ""; position: absolute; top: 5px; /* 阴影偏移 */ left: 5px; width: calc(100% - 10px); /* 阴影大小 */ height: calc(100% - 10px); border-radius: 10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); z-index: -1; /* 阴影放在图片下方 */ }这种方式的优势在于可以更精细地调整阴影的位置和大小，甚至可以创建更复杂的阴影效果。 需要注意的是，要确保容器的
position属性设置为relative，伪元素的position属性设置为absolute。 -
利用
filter: drop-shadow()：drop-shadow()滤镜可以直接给图片添加阴影，并且会自动识别图片的透明区域。img { border-radius: 10px; filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3)); }这种方式非常方便，但兼容性可能不如
box-shadow。
CSS圆角图片阴影效果在不同浏览器中的兼容性如何？
不同的CSS属性在不同浏览器中的兼容性不同。border-radius的兼容性相对较好，主流浏览器都支持。box-shadow的兼容性也比较好，但老版本的IE可能需要添加私有前缀。filter: drop-shadow()的兼容性相对较差，特别是IE浏览器。
在实际开发中，建议使用Can I Use等工具查询具体属性的兼容性，并根据需要添加兼容性处理。例如，可以使用autoprefixer等工具自动添加私有前缀。
如何使用CSS变量控制圆角和阴影的样式？
使用CSS变量可以方便地统一管理和修改圆角和阴影的样式。
:root {
--border-radius: 10px;
--shadow-color: rgba(0, 0, 0, 0.3);
--shadow-offset-x: 2px;
--shadow-offset-y: 2px;
--shadow-blur: 5px;
}
img {
border-radius: var(--border-radius);
box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color);
}
/* 修改样式 */
img:hover {
--border-radius: 15px;
--shadow-color: rgba(0, 0, 0, 0.5);
--shadow-offset-x: 3px;
--shadow-offset-y: 3px;
--shadow-blur: 7px;
}通过修改CSS变量，可以轻松地改变圆角和阴影的样式，而无需修改大量的CSS代码。
除了box-shadow，还有其他方法可以实现图片的阴影效果吗？
除了box-shadow，还可以使用filter: drop-shadow()滤镜来实现图片的阴影效果。drop-shadow()滤镜的优势在于可以自动识别图片的透明区域，并根据透明区域生成阴影。
此外，还可以使用SVG滤镜来实现更复杂的阴影效果。SVG滤镜可以创建各种各样的阴影效果，但使用起来相对复杂。
