摘要：
做大屏的项目时，遇到很多地方要用到不同尺寸的盒子需要圆角的效果，所以不可能要求ui弄那么多图片的，并且那么多图片加载速度很慢的，比较臃肿，大屏要求的就是流畅，所以这用css加载很快的！封装了对应的盒子给到对应的class，给不同高宽来实现 !
<style>* {margin: 0;padding: 0;box-sizing: border-box;}.flexCenter {display: flex;justify-content: center;align-items: center;}html,body {height: 100%;.flexCenter(); }:root {--borderColor: red;}.content {}.logo {border-radius: 10px;box-shadow: 0 0 1.5vw #2F4F4F inset;cursor: pointer;text-align: center;width: 500px;height: 100px;line-height: 100px;padding: 0px 20px;background: linear-gradient(to left, var(--borderColor), var(--borderColor)) left top no-repeat,linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left top no-repeat,linear-gradient(to left, var(--borderColor), var(--borderColor)) right top no-repeat,linear-gradient(to bottom, var(--borderColor), var(--borderColor)) right top no-repeat,linear-gradient(to left, var(--borderColor), var(--borderColor)) left bottom no-repeat,linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left bottom no-repeat,linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat,linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat;background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;transition: all .4s ease;border: 1px solid transparent;color: white;font-size: 30pt;letter-spacing: 0.1em;}.logo:hover {/* border: 1px solid var(--borderColor) */}
</style>
<body><div class="content"><div class="logo"></div></div>
</body>
