在同一个 div 上的内嵌和外框阴影

【问题标题】：box-shadow both inset and outside on same div在同一个 div 上的内嵌和外框阴影
【发布时间】：2011-11-01 10:42:11
【问题描述】：

我不能在同一个 div 上同时拥有内部和外部的盒子阴影吗？我试过了，还是不行

【问题讨论】：

标签： css

【解决方案1】：

您需要使用逗号分隔两个阴影：http://jsfiddle.net/gryzzly/CWuw8/3/ 您还需要添加特定于浏览器的前缀，以便在任何受支持的地方都可以使用：

div {
  -webkit-box-shadow: 
    10px 10px 10px #000, 
    inset 0 0 10px #000;
  -moz-box-shadow: 
    10px 10px 10px #000, 
    inset 0 0 10px #000;
  -o-box-shadow: 
    10px 10px 10px #000, 
    inset 0 0 10px #000;
  box-shadow: 
    10px 10px 10px #000, 
    inset 0 0 10px #000;
}

您还必须为阴影指定颜色才能看到它。

【讨论】：

【解决方案2】：

使用 CSS3，您可以通过逗号分隔多个框阴影，例如：

box-shadow: 10px 10px 10px, 0 0 10px inset;

你可以有多少你想要的。

【讨论】：

【解决方案3】：

添加了可运行代码sn-p：

div {
  top: 100px;
  position: absolute;
  left: 100px;
  height: 100px;
  width: 100px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, .5),
    0 0 10px rgba(255, 0, 0, .5) inset;
  border-radius: 5px;
  background: white;
}

body {
  background: #fff
}

&lt;div&gt;&lt;/div&gt;

【讨论】：