利用CSS实现渐变色边框

通过CSS实现渐变色边框的几种方法：

一、用border-image 来实现：
CSS代码如下：

.box {width: 200px ;height: 200px ;border: 10px solid #ddd;border-image: linear-gradient(rgb(89, 0, 255),pink) 30 30;}

效果如下：

二、使用background-image实现：
CSS代码如下：

.box1 { width: 200px; height: 200px; box-sizing: border-box; padding: 10px; border-radius: 50%; background-image: linear-gradient(top, pink 0%, blue 30%, yellow 60%, green 90%);
}
.box2 { width:100%; height:100%; border-radius:50%; background:#fff;
}

三、使用background-clip，backgound-origin，backgound-image实现：
CSS代码如下：

.border-box {border: 5px solid transparent;border-radius: 15px;background-clip: padding-box, border-box;background-origin: padding-box, border-box;background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}

以上就是实现渐变色边框的三种方法，感谢阅读。

利用CSS实现渐变色边框相关推荐

css实现渐变色边框动态旋转
场景:实现渐变色边框旋转思路是:利用渐变色的背景旋转动画来实现边框旋转代码如下: <body><div class ...
CSS 之渐变色边框
一.渐变色边框如果我们前端最亲爱的UI设计师,让我们给盒子绘制一个渐变色的边框,而且盒子的宽高还需要随着内容变化而变化,那我们就不能通过切图来解决问题,所以我们可以这么说: 但是我相信优秀的你肯定不 ...
3种CSS实现渐变色边框（Gradient borders方法的汇总
1.两层元素.background-image.background-clip 为了解决方法 2 中 border-radius 不准确的问题,可以使用一个单独的元素作为渐变色背景放在最下层,上层设置 ...
html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框
html知识点之利用css四边形切角并且加上边框 html知识点之利用css四边形切角并且加上边框前言这几个月做了很多前端工作,其中一个需求还是蛮头疼,UI给的图上面的四边形是一个带斜边的,直接用 ...
用css实现鼠标移入按钮，按钮出现动态的渐变色边框效果
用css实现边框的动态渐变色效果,希望对各位能有一些帮助. 边框.html <!DOCTYPE html> <html lang="en"><head ...
css渐变色边框的实现的方法
在项目中,边框的样式多种多样,一种常见的渐变色边框出现:而这种渐变色的边框又结合各种各样的设计,这里结果实现的效果与浏览器的兼容性总结渐变色的实现方法: 圆角的渐变边框border-image 点击进 ...
【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
html多重边框，中间空白,【基础】CSS实现多重边框的5种方式
原文:[基础]CSS实现多重边框的5种方式简言目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...
js锚点定位_overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...

利用CSS实现渐变色边框

利用CSS实现渐变色边框相关推荐

最新文章

热门文章