Css 使用长方体阴影创建边框

我正在尝试使用box shadow在2个html元素周围创建边框。我无法在按钮元素上使用用户框阴影，因为Android中的性能非常差，它需要在每个内部元素上。我也不能使用用户

border

proerty，因为在一些安卓设备上性能也很差。如图所示，左侧和右侧的“边界”比顶部和底部厚

下面的解决方案在

em

元素的顶部、左侧和底部以及

span

元素的顶部、右侧和底部使用方框阴影

如何使“边界”看起来均匀

<button class="button">
    <em></em>
   <span class="hidden" style="display: inline;">698</span>
</button>


.button {
    background: #00bdf2;
    border-color: white;
    border-width: 0.1rem;
    border-style: solid;
    float: right;
    height: 3rem;
    margin-right: 2.4rem;
    margin-top: 0.9rem;
    overflow: visible;
    padding: 0;
    position: relative;
    z-index: 101;
    border: 0;
    }

    input, button {
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    }


    .button em {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    display: inline-block;
    float: left;
    height: 100%;
    padding: 0 1rem;
    width: 1.5rem;
    -webkit-box-shadow: inset .1rem 0 0 .1rem #000;
    -moz-box-shadow: inset 0 0 .2rem #000;
    box-shadow: inset .1rem 0 0 .1rem #000;
    }

    .button > span {
    background: #ffcd00;
    color: #444444;
    float: right;
    height: 100%;
    font-family: Arial;
    font-size: 1.4rem;
    line-height: 3rem;
    padding: 0 1rem;
    text-align: center;
    -webkit-box-shadow: inset .1rem 0 0 .1rem #000;
    -moz-box-shadow: inset 0 0 .2rem #000;
    box-shadow: inset -.1rem 0 0 .1rem #000;
    }

698
.按钮{
背景：#00bdf2；
边框颜色：白色；
边界宽度：0.1rem；
边框样式：实心；
浮动：对；
高度：3雷姆；
保证金权利：2.4rem；
最高保证金：0.9雷姆；
溢出：可见；
填充：0；
位置：相对位置；
z指数：101；
边界：0；
}
输入，按钮{
边界半径：0；
大纲：无；
-webkit外观：无；
-webkit点击突出显示颜色：透明；
}
.扣上{
背景位置：中心；
背景重复：无重复；
背景大小：1.5雷姆1.5雷姆；
显示：内联块；
浮动：左；
身高：100%；
填充：0 1rem；
宽度：1.5雷姆；
-webkit盒阴影：插图1rem 0 0.1rem#000；
-moz盒阴影：插入0.2rem#000；
盒影：插图1雷姆0.1雷姆#000；
}
.按钮>跨度{
背景：#ffcd00；
颜色：#4444；
浮动：对；
身高：100%；
字体系列：Arial；
字体大小：1.4rem；
线高：3rem；
填充：0 1rem；
文本对齐：居中；
-webkit盒阴影：插图1rem 0 0.1rem#000；
-moz盒阴影：插入0.2rem#000；
盒影：插图-0.1rem 0.1rem#000；
}

通过将h阴影移动到.1rem和-.1rem，您将阴影向左（或向右）推该值，因此通过设计，这将在该侧显示更多阴影

---

删除该值并将其设置为0将解决此问题，但也将显示您试图隐藏它的一侧的阴影，这样就不会产生您想要的效果。

您是否尝试过

框阴影：插入0.1rem#000？（删除偏移量-x的
值）