css - 使用 box-shadow 创建边框

Question

我正在尝试使用框阴影在 2 个 html 元素周围创建边框。我不能在按钮元素上使用 box-shadow，因为 Android 的性能很差，它需要在每个内部元素上。我也不能使用 border 属性，因为在某些 Android 设备上性能又很差。正如您在 jsfiddle 上看到的那样，左右“边框”比顶部和底部粗。

下面的解决方案在 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;
    }

Answer 1

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

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