CSS：如何隐藏这样的字段？ [关闭]

Posted 2023-04-18

【中文标题】CSS：如何隐藏这样的字段？ [关闭]

【英文标题】：CSS: How to shadow a field like this? [closed]

【发布时间】：2013-01-26 15:03:30

【问题描述】：

我正在尝试设置文本输入字段的样式。到目前为止，我尝试使用边框和图像作为背景，但这不是一个可扩展的解决方案。如何设置如下图所示的输入字段样式？

【问题讨论】：

This 会帮助你

到目前为止你有没有尝试过？做过研究吗？看看使用渐变作为边框以及内部box-shadow。

***.com/questions/11361075/… -- 可能重复

【参考方案1】：

使用 CSS3 box-shadow 属性。示例：

input[type=text] 
    box-shadow: inset 2px 2px 2px 2px black;

【参考方案2】：

同意@Morpheus。 您也可以同时使用 2 个阴影：

input[type=text] 
    box-shadow: inset 0 2px 2px 2px #000, inset 0 -2px 2px 2px #fff;