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放在顶部和底部，就像这样做

Inset Top Bottom Demo

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;
}

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

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

1 个答案: