标记导致错误后的CSS语音泡沫

Question

Fiddle

ul{
    height:240px;
    border:1px solid #000;

}
#react-setting{
    background:rgba(255, 253, 200, 1);
    z-index:2;
    display:block;      
    position:absolute;
    width:125px;
    padding:6px 5px 5px 5px;
    box-shadow:0 0 2px #000;

}
#react-setting:after{
    content: "\00a0";
    display: block;
    height: 8px;
    width:8px;
    left: 18px;
    position: absolute;
    top: -4px;
    -webkit-transform: rotate( 45deg );
    -moz-transform: rotate( 45deg );
    background:rgba(255, 253, 200, 1);
        box-shadow:0 0 2px #000;
}

我想要的是围绕box-shadow及其#react-setting的连续:after。现在它看起来像这样：

如您所见，:after有自己的完整box-shadow。

Answer 1

我使用以下#react-setting:after（fiddle）得到了不错的结果：

 box-shadow: -1px -1px 1px rgba(0,0,0,.35);

样品：