使用 box-shadow 创建边框答案

【问题标题】：creating a border with box-shadow使用 box-shadow 创建边框
【发布时间】：2014-08-12 20:46:45
【问题描述】：

我正在尝试使用框阴影在 2 个 html 元素周围创建边框。我不能在按钮元素上使用 box-shadow，因为 Android 中的性能很差，它需要在每个内部元素上。我也不能使用border proterty，因为在某些安卓设备上性能很差。正如您在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;
    }

【问题讨论】：

你试过box-shadow: inset 0 0 0 .1rem #000;吗？（删除offset-x 值）

标签： css

【解决方案1】：

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

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

【讨论】：