我要实现的效果
我写出来的效果
参考来自：圆角效果(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新手，记录下而已。
