CSS渐变色边框，解决border设置渐变后，border-radius无效的问题

最新推荐文章于 2025-07-16 15:18:46 发布

水荷

最新推荐文章于 2025-07-16 15:18:46 发布

阅读量7w

点赞数 34

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/shuiseyangguang/article/details/83618757

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍使用CSS border-image和背景渐变实现渐变色边框的方法，包括如何通过padding模拟边框达到圆角效果，适用于网页设计和前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：用css设置渐变边框
通过border-image来实现渐变色边框

<div class="content"></div>

.content { 
	width: 100px;
    height: 100px;
    border:10px solid #ddd;
    border-image: -webkit-linear-gradient(red,yellow) 30 30;
   	border-image: -moz-linear-gradient(red,yellow) 30 30;
    border-image: linear-gradient(red,yellow) 30 30; 
}

效果如下：
在这里插入图片描述
但是border-image无法实现圆角，所以换一个思路：通过padding来实现，给父节点设置渐变背景，通过padding模拟边框（此处的padding值就是border需要的值），注意父元素和子元素的border-radius属性值保持一致。

<div class="content
	<div class="box"></div>
</div>

css

.content { 
	width: 100px; 
   	height: 100px; 
    box-sizing: border-box; 
    padding: 5px; 
    border-radius: 50%; 
    background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);  
    background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%); 
    background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);  
}
.box { 
	width:100%; 
    height:100%; 
    border-radius:50%; 
    background:#fff; 
}

效果图：
在这里插入图片描述