实现思路:定义一个具有相对定位、白色背景和透明边框的元素。边框宽度为3像素,并且有20像素的圆角。通过background-clip: padding-box;
确保背景不会延伸到边框之外。
使用一个伪元素&::before
来创建一个渐变边框。这个伪元素被放置在主元素的外部,通过绝对定位和负边距与主元素的边框对齐。渐变背景从左边的蓝色(rgba(7, 77, 255, 1))过渡到右边的绿色(rgba(178, 239, 188, 0.96)),并且也有20像素的圆角。z-index: -1;
确保这个渐变边框位于内容的下方,作为背景存在。
.box{position: relative;background: #fff;border: 3px solid transparent; /* 增加边框宽度 */border-radius: 20px; /* 确保边框有圆角 */background-clip: padding-box; /* 使背景不覆盖边框 *//* 伪元素用于创建渐变边框 */&::before {content: "";position: absolute;top: -3px; /* 与边框宽度匹配 */left: -3px; /* 与边框宽度匹配 */right: -3px; /* 与边框宽度匹配 */bottom: -3px; /* 与边框宽度匹配 */border-radius: 20px; /* 确保伪元素有圆角 */background: linear-gradient(to right,rgba(7, 77, 255, 1),rgba(178, 239, 188, 0.96));z-index: -1; /* 确保在背景下 */}}
最终效果: