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

Question

我想将两个 90 度角的盒子阴影应用到我的input领域，所以我希望阴影只在顶部和底部边界，而不是在左右边界。相反，左侧有一个我无法摆脱的深色嵌入阴影（请参阅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;
}

注意：我添加了边框，您可以删除