css - 在容器元素上应用盒子阴影

Question

我正在尝试使用纯 CSS 制作一个嵌入药丸：

其中两个色块可分别点击。

但我不知道如何将框阴影应用于包含元素。我得到的最接近的是使用一个:after元素并将其定位在链接上；但这掩盖了链接，使它们无法点击：

( jsFiddle )

<div class="pill">
    <a href="#" class="plus">&#10010;</a>
    <a href="#" class="circle">&#10687;</a>
</div><!--/.pill-->


.pill {
    position: relative;
    float: left;
    &:after {
        content: "";
        display: block;
        border-radius: 8px;
        box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    a {
        display: block;
        padding: 4px 6px;
        text-decoration: none;
        color: #fff;
        float: left;
        &.plus {
            background: #3c55b1;
            border-radius: 8px 0 0 8px;
            border-right: 1px solid darken(#3c55b1, 30%);
        }
        &.circle {
            background: #40be84;
            border-radius: 0 8px 8px 0;
            border-left: 1px solid lighten(#40be84, 15%);
        }
    }
}

我知道指针事件属性，但浏览器支持非常简陋。

那么我们怎么看？可能的？

Answer 1

您没有在 box shadow 上使用 spread 属性，因此您想创建一个边框，而是使用 box shadow 为每个元素添加一个边框。

删除该:after属性并将获得正常行为

jsFiddle

Answer 2

让它变得简单，从 a 中绘制你的盒子阴影，所以它们的大小无关紧要。

http://codepen.io/gcyrillus/pen/xwcKg

.pill {
  position: relative;
  float: left;
  background:#eee;
  padding:0.5em;

}
a {
  display: inline-block;
  padding: 4px 6px;
  width:1em;
  text-align:center;
  text-decoration: none;
  color: #fff;
  font-weight:bold;
  box-shadow:inset 1px 2px 0 rgba(0,0,0,.35);
}
.plus {
  background: #3c55b1;
  border-radius: 8px 0 0 8px;
  border-right: 1px solid #0c2571;
  position:relative;
}
.circle {
  background: #40be84;
  border-radius: 0 8px 8px 0;
  box-shadow:
    inset 0px 2px 0 rgba(0,0,0,.35),
    inset 1px 0 0 #70de94
    ;
}