圆角导致的奇怪的“边框”

大家看这不是有个红色的DIV嘛

这没有什么问题

然后呢我把里面再加一个白色的DIV

大家看大小是一样的哈

肯定他就会被覆盖了

但是呢

注意这时候如果我给里边这个加一个

圆角!大家看啊

用随便写个大小

现在看没有问题

但是呢我稍微放大一点打卡

他就会感觉

四周都会有这个红色的边框了

那这个放大的问题只有在电脑上有

但是如果你在手机上呢

你会发现你不放大

他也能看到这个边框

所以这个就比较别扭

所以呢我们今天先不管它什么原因

我们就想办法先把它解决掉

首先它产生边框

我们就会想肯定是里边不够大对吧

那我们就会想

是不是把里边这个容

器稍微改大一点就可以了

我们来试一下啊

还不行他上面和左边是盖不住的

因为即使你改大了

他还是从

顶端这个00的这个位置这样大

所以他盖不住顶上和

左边

包括呢我们用border的方式把它扩大

它也是一样的道理

它也是盖不住顶上和左边

比如把它改成白色大家看

上面和左边他还是有

所以呢border和扩大他都不是很理想

所以呢我们可以采用这个 box-shadow

我们啊用阴影

只不过呢用白色的阴影把它来盖住

这块呢我们不用这么大

我们用零点几就行这块大家自己试

他看现在就可以了

那既然我用了0.4呢

那可能他把圆角稍微盖了一点

把圆角稍微扩大一点

这样就可以了

最后更新于