css 边框渐变-Toy模板网

这篇具有很好参考价值的文章主要介绍了css 边框渐变。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：

普通的div 边框不好看，做一个渐变色

进程：

最简单的当然是做一个内部是白色的边框是渐变色的图，然后使用 background: url("back.jpg")，这样看起来就像是做了一个渐变的边框
如果做不了图，可以做一个渐变的背景如何用白底把中间的覆盖掉

{
   .box1 {
       background: linear-gradient(180deg, #F0F1F5 0%, #FFF 100%); // 背景加一个渐变
       padding: 1px;
       .box2 {
           width: 100%;
           height: 100%;
           background-color: #FFF;
       }
   }
}

这个当border 有弧度的时候看起来会有点奇怪，所以可以反着来

{
	.box1 {
		border: 1px solid transparent;
		background-clip: padding-box; // 裁剪背景到边框以内，这样下面就能露出边框的颜色
		background-color: #FFF;
		border-radius: 4px;
		.box2 {
			z-index: -1; //把上面的放到下面
			background: linear-gradient(180deg, #F0F1F5 0%, #FFF 100%); // 背景加一个渐变
			border-radius: inherit;
			width: 100%;
            height: 100%;
		}
	}
}

使用border-image

    hieght: 100px;
    width: 100px;
	background: linear-gradient(180deg, #F0F1F5 0%, #FFF 100%); // 背景也加一个渐变
	border: 1px solid; //这个是必须的不然边框都没有
	              //边框渐变       起始色号              中间色号     结尾色号        
	border-image: linear-gradient(rgba(30, 93, 255, 0.35),#FFF,rgba(30, 93, 255, 0.35)) 1;

这个参数有个限制，ie10 及以下浏览器不支持

拓展：文章来源地址https://www.toymoban.com/news/detail-802411.html

background-clip 有3个属性，border-box：整个div 范围以内，padding-box：border 范围以内，所以上面可以裁剪留下边框的部分，content-box：内容以内，就padding 啥的都算上，都裁剪掉，还有一个特殊的，text，这个只有chrome 里有用，不过这玩意贼牛逼，可以裁剪到文字级别

到了这里，关于css 边框渐变的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！