如何在使用箱型阴影插入时将边框设置为无？

我只是想在框的底部没有边框，或者它不可能？我使用'box-shadow：inset'而不是常规边框样式的原因是，它不会改变我的框的大小，并将我的框移出位置。如何在使用箱型阴影插入时将边框设置为无？

.box { 
    width: 82px; 
    height: 56px; 
    box-shadow:inset 0px 0px 0px 5px #AC92C4; 
    border-radius: 5px 5px 0px 0px; 
}

https://jsfiddle.net/dcaktwuz/

来源

2016-10-15 Fortytwo

你也可以使用'box-sizing：border box'结合一个正常的边框。 – GolezTrol

您写道：

我使用“的原因箱 - 阴影：插入'而不是常规边框风格，因为它不会改变我的箱子尺寸，并将我的箱子从的位置移出。

您仍然可以尝试做一个边框（），并添加box-sizing: border-box，其中将包括在元件的整体宽度和高度的边界（和填充）。

来源

2016-10-15 23:57:55 Johannes

您可以移动的阴影：

.box { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 82px; 
 
    height: 56px; 
 
    border-radius: 5px 5px 0px 0px; 
 
    border: 1px solid #ccc; 
 
} 
 
.shift1 { 
 
    box-shadow: inset 5px 5px 0px 5px #AC92C4; 
 
} 
 
.shift2 { 
 
    box-shadow: inset -5px 5px 0px 5px #AC92C4; 
 
} 
 
.shift1.shift2 { 
 
    box-shadow: inset 5px 5px 0px 5px #AC92C4, inset -5px 5px 0px 5px #AC92C4; 
 
}

<div class="box shift1"></div> + <div class="box shift2"></div> = 
 
<div class="box shift1 shift2"></div>

来源

2016-10-15 23:53:44 Oriol

如何在使用箱型阴影插入时将边框设置为无？

回答

相关问题