border渐变，css边框渐变

最新推荐文章于 2024-06-20 16:13:28 发布

兔子敲代码

最新推荐文章于 2024-06-20 16:13:28 发布

阅读量906

点赞数

文章标签： css html css3 python java

本文链接：https://blog.csdn.net/qq_38499671/article/details/109238001

版权

前端经常会用到渐变背景，如果总是用图片，显得自己很不专业，对于背景渐变很多人都会，也经常用，那么今天七娃总结一个 border边框的渐变实现方法：

border: 2px solid;
border-image: -webkit-linear-gradient( red, blue) 30 30;
border-image: -moz-linear-gradient( red, blue) 30 30;
border-image: linear-gradient( red, blue) 30 30;

效果如下：

解释：首先设置边框border有宽度，和线条类型，这里七娃用的是实线solid，你们也可以用虚线测试一下；然后通过边框背景border-image进行渐变填充，我们来看一下border-image的属性：

border-image: source slice width outset repeat|initial|inherit;

border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。