css3文本框凹陷

CSS3是现代Web设计必不可少的一部分，它提供了许多强大的功能。其中，CSS3文本框凹陷效果在网页设计中应用广泛，可以使展示的内容更加美观、富有层次感。

要实现CSS3文本框凹陷效果，需要用到如下代码：

    /* 添加一个文本框 */
    input {
        border: none;
        padding: 10px;
    }
    
    /* 背景效果 */
    .bg {
        background-color: white;
        position: relative;
        z-index: 1;
    }
    
    /* 凹陷效果 */
    .con {
        position: relative;
        z-index: 100;
        background-color: #F1F1F1;
        border: 1px solid #ddd;
        Box-shadow: inset 1px 1px 3px rgba(0,0.1);
    }

上述代码中，使用了三个类：input、bg和con。其中，input为文本框，bg为背景，con为文本框凹陷部分。

首先，我们先为文本框添加样式，去掉边框并设置内边距10px。然后，在背景样式中，设置背景颜色为白色，并设置其z-index属性为1。

接着，我们创建凹陷效果，将其放置在背景样式之上，并设置其z-index值更高。我们将背景颜色设置为#F1F1F1，边框设置为1px的灰色边框，还使用了Box-shadow属性来实现凹陷效果。

实现CSS3文本框凹陷效果后，便可以将其应用于任意的文本框之上。在实际开发中，可以使用JS库（如jQuery）来自动为页面中所有的文本框添加CSS3凹陷效果，这样可以进一步节约开发时间。