Question

我正在尝试使用框阴影围绕2个html元素创建边框。我不能在按钮元素上使用box-shadow，因为Android中的性能非常差，它需要在每个内部元素上。我也无法使用border proterty，因为在某些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阴影移动到.1rem和-.1rem，您可以将阴影向左（或向右）推动该值，因此，通过设计，这将显示更多阴影。

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

用box-shadow创建边框

1 个答案: