渐变边框可以使用border-image
,但带有圆角的渐变边框单靠border-image
却无法实现,那有哪些方法可以实现圆角渐变边框呢?
css实用小知识,你肯定用得上
方案一:使用border-image
+clip-path
实现
<style>.radius-gradient-border1{max-width: 300px;padding: 8px;border: 5px solid transparent;border-image: linear-gradient(90deg, #387EE8, #f60) 1;border-radius: 5px;margin-bottom: 20px;color: #f60;background-color: rgba(255,255,255,0.5);clip-path: inset(0 0 round 5px);}</style><div class="radius-gradient-border1"><p>border-image</p>+<p>clip-path</p>实现</div>
优点是内容背景可以透明
方案二:background-image
+background-clip
实现
<style>.radius-gradient-border2{max-width: 300px;padding: 0;border-radius: 5px;border: 5px solid transparent;margin-bottom: 20px;color: #f60;/* 这里需要设置两个背景,第一个背景是内容区域的白色背景,另一个是实现渐变边框的背景 */background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #387EE8, #f60);/* 设置背景图标的坐标原点为border-box区域的左上角,因为我们希望背景可以渗透到边框处,因此需要从边框处开始裁切,因此需要设置为border-box,默认为padding-box的左上*/background-origin: border-box;/* 背景裁切的时候,第一个背景需要从内容区域开始裁切,因此设置为content-box;第二个背景需要作为渐变边框,因此需要从边框处开始裁切 */background-clip: content-box, border-box;}</style><div class="radius-gradient-border2"><p> background-image </p>+ <p>background-clip</p>实现</div>
缺点:
内容背景不能半透明实现复杂不能使用padding
方案三:border-image
+overflow: hidden
实现
<style>.radius-gradient-border3{max-width: 300px;border-radius: 5px;margin-bottom: 20px;overflow: hidden;}.radius-gradient-border3 .inner{padding: 8px;border: 5px solid transparent;border-image: linear-gradient(90deg, #387EE8, #f60) 1;color: #f60;background-color: rgba(255,255,255,0.7);}</style><div class="radius-gradient-border3"><div class="inner"><p>border-image</p>+<p>overflow: hidden</p>实现</div></div>
缺点:需要多嵌套一层父元素,并且还需要设置overflow: hidden;
方案四:background-image
+父div
实现
<style>.radius-gradient-border4{max-width: 300px;padding: 5px;border-radius: 5px;background-image: linear-gradient(90deg, #387EE8, #f60);}.radius-gradient-border4 .inner{background-color: rgba(255,255,255,0.7);}</style><div class="radius-gradient-border4"><div class="inner"><p>background-image</p>+<p>父div</p>实现</div></div>
这个缺点和方案三一样