输入字段上不需要的内部框阴影

Question

我想对我的input视野应用两个90度角的矩形阴影，因此我希望阴影仅在顶部和底部边界处，而不在左侧和右侧边界处。相反，左侧有一个深色的嵌入式阴影，我无法摆脱它（请参阅Fiddle）。有任何想法吗？

Answer 1

你是什​​么意思？您正在使用inset，因此，如果您想在输入字段之外添加顶部和左侧阴影，请按照以下步骤操作：

演示版

的CSS

input{
    margin: 20px;
    width: 150px;
    height: 30px;
    border-radius: 10px;
    -moz-box-shadow: -5px -5px 5px #888;
    -webkit-box-shadow: -5px -5px 5px #888;
    box-shadow: -5px -5px 5px #888;
    outline: none;
    border: 1px solid #dddddd;
}

而且，如果您只想付出inset最高和最低要求，就可以这样做

插图顶部底部演示

的CSS

input{
    margin: 20px;
    width: 150px;
    height: 30px;
    border-radius: 10px;
    box-shadow: inset 0px 11px 8px -10px #888, inset 0px -11px 8px -10px #888;
    outline: none;
    border: 1px solid #dddddd;
}

注意：我已添加边框，不过您可以删除