CSS 元素框阴影问题

Question

框阴影显示元素内部的小边框

.green{
    background-color: #fff;
    border: 10px solid lightgray;
    border-radius: 100px;
    box-shadow: inset 0 0 0 1px lightgray;
    cursor: pointer;
    height: 50px;
    position: relative;
    transition: border .25s .15s, box-shadow .4s .3s, padding .25s;
    width: 150px;
    vertical-align: top;
    position: absolute;
}

.green.checked{
    border-color: #70c7c2;
    box-shadow: inset 0 0 0 25px #70c7c2;
    transition: border .25s, box-shadow .25s, padding .25s .15s;
}

www.jsfiddle.net/7uThf

Answer 1

这是默认的半径，你可以尝试在背景中使用相同的颜色隐藏它: DEMO

.green.checked{
    border-color: #70c7c2;
    background-color: #70c7c2;
    box-shadow: inset 0 0 0 25px #70c7c2;
    transition: border .25s, box-shadow .25s, padding .25s .15s;
}

你也可以使用一个伪元素，它继承父元素的边框和阴影，稍微小一点: DEMO

.green:after, .green.checked:after {
    content:'';
    position:absolute;
    top:-9px;
    right:-9px;
    bottom:-9px;
    left:-9px;
    border:inherit;
    box-shadow:inherit;
    border-radius:inherit;