css内投影

CSS内投影（Inner Shadow）

基础概念

CSS内投影是一种文本效果，它允许你在元素的背景上添加一个阴影效果，使得元素看起来像是有一个凹陷的区域。与外阴影（box-shadow）不同，内投影是在元素内部创建阴影效果。

类型

CSS内投影主要通过box-shadow属性实现，但需要注意的是，box-shadow本身并不直接支持内投影。要实现内投影效果，通常需要使用一些技巧，比如负的偏移量。

应用场景

按钮和卡片：在按钮和卡片组件中添加内投影，可以使其看起来更加突出和有质感。
文本框和输入框：在文本框和输入框中添加内投影，可以增强其视觉吸引力，提升用户体验。

示例代码

以下是一个使用CSS实现内投影效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inner Shadow Example</title>
    <style>
        .inner-shadow {
            width: 200px;
            height: 100px;
            background-color: #f0f0f0;
            border-radius: 10px;
            box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <div class="inner-shadow"></div>
</body>
</html>

在这个示例中，box-shadow属性使用了inset关键字，表示这是一个内投影效果。0 4px 8px rgba(0, 0, 0, 0.2)定义了阴影的偏移量、模糊半径和颜色。