Question

我正在尝试使用纯CSS制作插页药片：

enter image description here

两个颜色块可单独点击。

但我无法弄清楚如何将盒子阴影应用于包含元素。我得到的最接近的是使用:after元素并将其定位在链接上;但这会掩盖链接，使其无法点击：

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

我知道pointer-events property，但浏览器支持非常简陋。

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

Answer 1

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

删除: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
    ;
}

在容器元素上应用Box Shadow

2 个答案: