css文本框阴影效果

CSS文本框阴影效果

基础概念

CSS文本框阴影效果（box-shadow）是一种用于在HTML元素周围添加阴影的CSS属性。它可以创建一个或多个阴影，从而增强元素的视觉效果。

类型

box-shadow属性的基本语法如下：

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

h-offset：水平偏移量，正值表示向右偏移，负值表示向左偏移。
v-offset：垂直偏移量，正值表示向下偏移，负值表示向上偏移。
blur-radius（可选）：模糊半径，正值表示模糊效果，负值无效。
spread-radius（可选）：扩展半径，正值表示阴影扩大，负值表示阴影缩小。
color：阴影颜色。
inset（可选）：内阴影，不加此参数默认为外阴影。

应用场景

按钮和输入框：为按钮和输入框添加阴影效果，使其看起来更加立体和吸引用户注意。
卡片布局：在卡片布局中添加阴影效果，可以增强卡片的层次感和立体感。
网页元素装饰：用于网页中的各种装饰元素，如图片、图标等，增加视觉效果。

示例代码

以下是一个简单的示例，展示如何为一个文本框添加阴影效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Box Shadow Example</title>
    <style>
        .shadow-box {
            width: 300px;
            height: 200px;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="shadow-box">
        This is a box with shadow effect.
    </div>
</body>
</html>