輸入框中不需要的內框陰影

我想將90度角的兩個陰影框應用於我的input字段，所以我期望陰影只在頂部和底部邊界處，而不是在左側和右邊界。相反，左邊有一個我無法擺脫的暗色陰影（請參閱Fiddle）。有任何想法嗎？輸入框中不需要的內框陰影

2012-11-11 joschaf

你是什麼意思？您正在使用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; 
}

注：我添加邊框，可以去除雖然

來源

2012-11-11 13:33:15

對不起，我的問題是不清晰的。其中一個陰影應該嵌入（黑色，只有頂部邊框），另一個不插入（淺色，只有底部）。問題是我不想在那裏留下一個黑色的嵌入邊界。但是，無論如何，你解決了我的問題：'邊界'做了竅門（[Fiddle]（http://jsfiddle.net/T9jma/5/））。非常感謝您的快速回答！ – joschaf

@Jo。沒問題，其實我很困惑，所以），你也歡迎 –

輸入框中不需要的內框陰影

回答

相關問題