这就是今天要实现的效果图（颜色提取推荐使用snipaste）
代码（仅供参考，不喜勿喷， 可以在评论区展示作品）
<html><head><script src="//at.alicdn.com/t/c/font_4930922_qnjgmb4frw.js"></script><style>/* Write your CSS code here */body {background-color: rgb(240, 243, 251);display: flex;}.outer {width: 600px;height: 400px;margin: auto;display: flex;flex-direction: column;justify-content: space-around;}.first {background-color: white;height: 40px;display: flex;justify-content: space-between;box-shadow: 0px 5px 5px 0px #00000047;}.second {background-color: rgb(21, 22, 38);height: 40px;display: flex;justify-content: space-between;box-shadow: 0px 5px 5px 0px #00000047;color: white;}.third {background-color: white;height: 40px;display: flex;justify-content: space-between;box-shadow: 0px 5px 5px 0px #00000047;border-radius: 20px;}.four {background-color: rgb(21, 22, 38);height: 40px;display: flex;justify-content: space-between;box-shadow: 0px 5px 5px 0px #00000047;color: white;border-radius: 20px;}.five {background-color: white;height: 40px;display: flex;justify-content: center;box-shadow: 0px 5px 5px 0px #00000047;}.six {background-color: rgb(21, 22, 38);height: 40px;display: flex;justify-content: center;box-shadow: 0px 5px 5px 0px #00000047;color: white;}.svg1 {width: 30px;height: 30px;padding: 5px;}span {display: inline-block;line-height: 40px;margin-left: 10px;}.svg2 {width: 20px;margin-right: 10px;}.svg2:hover {cursor: pointer;}</style></head><body><div class="outer"><div class="first"><div style="display: flex"><svg class="svg1" aria-hidden="true"><use xlink:href="#icon-wancheng"></use></svg><span>File has been removed successfuly.</span></div><svg class="svg2" aria-hidden="true"><use xlink:href="#icon-guanbi"></use></svg></div><div class="second"><div style="display: flex"><svg class="svg1" aria-hidden="true"><use xlink:href="#icon-wancheng"></use></svg><span>File has been removed successfuly.</span></div><svg class="svg2" aria-hidden="true"><use xlink:href="#icon-guanbi"></use></svg></div><div class="third"><div style="display: flex"><svg class="svg1" aria-hidden="true"><use xlink:href="#icon-wancheng"></use></svg><span>File has been removed successfuly.</span></div><svg class="svg2" aria-hidden="true"><use xlink:href="#icon-guanbi"></use></svg></div><div class="four"><div style="display: flex"><svg class="svg1" aria-hidden="true"><use xlink:href="#icon-wancheng"></use></svg><span>File has been removed successfuly.</span></div><svg class="svg2" aria-hidden="true"><use xlink:href="#icon-guanbi"></use></svg></div><div class="five"><div style="display: flex"><svg class="svg1" aria-hidden="true"><use xlink:href="#icon-wancheng"></use></svg><span>File has been removed successfuly.</span></div></div><div class="six"><div style="display: flex"><svg class="svg1" aria-hidden="true"><use xlink:href="#icon-wancheng"></use></svg><span>File has been removed successfuly.</span></div></div></div></body></html>
