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;

Answer 2

GCyrillus ：你可以尝试在背景中使用相同的颜色隐藏它

以下是如何推迟不干扰其他动画的背景更改的方法

.green{
    transition: background-color 0 .3s;
    /* changes background back to white before box-shadow animated */
}
.green.checked{
    background-color: #70c7c2;
    transition: background-color 0 .25s;
    /* changes background to green after border & box-shadow animated */
}

CSS元素框阴影问题

2 个答案: