在容器元素

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

我知道了pointer-events property的，但瀏覽器的支持是相當寒酸。

那麼我們怎麼看？可能？

Answer 1

你沒有在盒子陰影上使用spread屬性，所以你想創建一個邊框，而不是使用box shadow爲每個元素添加一個邊框。

取出:after財產，將得到正常行爲

jsFiddle

Answer 2

讓它簡單， 從提請您的box-shadow，所以它並不重要，他們採取至極的大小。

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