Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
内阴影生成器 - inset box-shadow可视化工具
一款专业的在线 CSS 内阴影生成工具。专门创建 inset box-shadow 效果，实时预览、一键复制CSS代码。适用于卡片凹陷效果、按钮按压效果等设计场景，纯本地计算，数据安全隐私。
0px
0px
20px
0px
0.5
Inset Shadow
box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.5);# 什么是 Inset Box Shadow？
Inset Box Shadow（内阴影）是CSS box-shadow属性的一种特殊效果，通过添加inset关键字， 可以将阴影效果应用到元素内部，而不是外部。这种效果常用于创建凹陷、按压、内嵌等视觉效果， 在现代网页设计中非常流行。
# 如何使用本工具
- 调整X、Y偏移量控制阴影位置
- 设置模糊半径和扩展半径调整阴影效果
- 选择阴影颜色和透明度
- 实时预览效果，满意后点击"复制CSS"按钮
# Inset Shadow 语法
box-shadow: inset h-offset v-offset blur-radius spread-radius color; - inset: 关键字，将阴影改为内部阴影
- h-offset: 水平偏移量，可为负值
- v-offset: 垂直偏移量，可为负值
- blur-radius: 模糊半径，值越大越模糊
- spread-radius: 扩展半径，正值扩大，负值缩小
- color: 阴影颜色
# 应用场景
- 按钮按压效果: 模拟按钮被按下的凹陷感
- 输入框聚焦: 创建输入框获得焦点时的内嵌效果
- 卡片设计: 为卡片添加深度和层次感
- 凹陷文字: 创建文字刻在表面的效果
# 常见问题 (FAQ)
Inset 和普通 box-shadow 有什么区别？
普通 box-shadow 在元素外部创建阴影，而 inset 在元素内部创建阴影。 Inset 阴影会让元素看起来凹陷或内嵌，普通阴影则让元素看起来浮起或突出。
如何创建凹陷输入框效果？
使用 inset box-shadow，设置较小的模糊半径和负值的扩展半径， 配合深色阴影颜色，可以创建出经典的凹陷输入框效果。
可以使用多个 inset 阴影吗？
可以。box-shadow 属性支持多个阴影值，用逗号分隔。 但要注意，inset 阴影必须放在普通阴影之前，且所有阴影都需要添加 inset 关键字。