插入阴影效果

Question

如何使用CSS制作内部阴影效果？

到目前为止，我得到了http://jsfiddle.net/yX26J/。如何仅在左侧和顶部应用阴影？

Answer 1

您可以使用以下方法更改阴影的偏移量：

div {
    width:80px; height:110px;
    background:#3183bd;
    -moz-box-shadow: inset 1em 1em 1em -1em #111;
    -webkit-box-shadow: inset 1em 1em 1em -1em #111;
    box-shadow: inset 1em 1em 1em -1em #111;
}

http://jsfiddle.net/ga6cy/4/

Answer 2

关键是要使用插页。所有支持box-shadow的浏览器的所有最新版本都支持它：

div.box {
  box-shadow: inset 10px 10px 10px #000000;
  -moz-box-shadow: inset 10px 10px 10px #000000;
  -webkit-box-shadow: inset 10px 10px 10px #000000;
}

此页面引用了浏览器支持： https://developer.mozilla.org/en/CSS/-moz-box-shadow

Answer 3

前几天我有同样的问题。

我很确定无法定义'顶部''左''底''右'这是一种耻辱。