我要实现的效果

我写出来的效果

参考来自：圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)

原理：其实设置下border-radius和box-shadow这两个属性就可以有圆角和阴影了

.root {
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 2px 2px 2px 0 blue;
}

但是这样写出来的效果却是上面第二章图片的效果，为啥呢？

然后调试了半天，发现是因为元素益处后会被clip掉。设置边框外的内容的时候，需要给足空间才能看见效果，不然就会被遮盖了。

.root {
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 2px 2px 2px 1 blue;
    margin: 10px;
}

加上 margin: 10px;就好了

总结

CSS新手，记录下而已。