首先介绍css3中实现边框渐变

使用border-image实现，代码和效果如下

.sleepContentView{width:242rpx;height:242rpx;border:20rpx solid;/* border-image有五个参数设置，依次为 图片路径，边框向内偏移，边框宽度，边框图像区域超出边框的量，边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 */border-image: -webkit-linear-gradient(#aaf0d8, #1C9C8F) 20 20;/* Safari 和 Chrome */border-image: -moz-linear-gradient(#aaf0d8, #2ED) 20 20;/* 老的 Firefox */border-image: -o-linear-gradient(#aaf0d8, #2ED) 20 20;/* Opera */border-image: linear-gradient(#aaf0d8, #2ED) 20 20;border-radius:50%;text-align:center;font-size:28rpx;box-sizing:border-box;
}<div class="sleepContentView"/>

这个时候有朋友开始心生疑惑了，不是说好了圆形渐变边框嘛，怎么是个方的，但细心的朋友会发现其实代码里写入border-radius：50%的，但依旧没有变成圆形边框，其实这个时候border-radius已经失效，所以是方形的，下面进行圆形渐变边框的讲解。

回到我们的css，使用background-image的渐变功能

大致思路是在父元素设置渐变background-image，使用一个padding，我们把这个padding值当做子元素的边框值看待，代码效果如下：

.sleepContentView{width:242rpx;height:242rpx;background-image: linear-gradient(#aaf0d8, #2ED) ;border-radius:50%;text-align:center;padding:20rpx;font-size:28rpx;box-sizing:border-box;
}
.sleepContentView .circle{width:100%;height:100%;background:#fff;border-radius:50%;
}<div class="sleepContentView"><div class="circle"/>
</div>

一边学习一边分享，若有错误，欢迎大家的留言，有留必回，朋友们下期再见啦。

css实现圆形渐变色边框相关推荐

利用CSS实现渐变色边框
通过CSS实现渐变色边框的几种方法: 一.用border-image 来实现: CSS代码如下: .box {width: 200px ;height: 200px ;border: 10px sol ...
CSS 之渐变色边框
一.渐变色边框如果我们前端最亲爱的UI设计师,让我们给盒子绘制一个渐变色的边框,而且盒子的宽高还需要随着内容变化而变化,那我们就不能通过切图来解决问题,所以我们可以这么说: 但是我相信优秀的你肯定不 ...
CSS样式：渐变色圆角边框
目录预期效果解决方法 1.两层元素:外层渐变背景+圆角+内边距,里层圆角+背景色 2.伪元素:background-clip属性+伪元素+定位+元素本身背景(以伪元素背景色做边框) 3.单层元素: ...
用css实现鼠标移入按钮，按钮出现动态的渐变色边框效果
用css实现边框的动态渐变色效果,希望对各位能有一些帮助. 边框.html <!DOCTYPE html> <html lang="en"><head ...
css椭圆圆形边框_使用CSS在弧形，圆形和椭圆形中制作动画元素
css椭圆圆形边框 Web animation is most often created between two points: from and to a state, or between po ...
css渐变色边框的实现的方法
在项目中,边框的样式多种多样,一种常见的渐变色边框出现:而这种渐变色的边框又结合各种各样的设计,这里结果实现的效果与浏览器的兼容性总结渐变色的实现方法: 圆角的渐变边框border-image 点击进 ...
CSS实现字体渐变色，边框渐变色
CSS实现字体渐变色,边框渐变色前言字体实现渐变色边框渐变色最后前言前段时间有做过字体渐变色和边框渐变色的需求,再此整理一下,以供大家参考. 字体实现渐变色 background: lin ...
css实现渐变色边框动态旋转
场景:实现渐变色边框旋转思路是:利用渐变色的背景旋转动画来实现边框旋转代码如下: <body><div class ...
css 圆形渐变边框以及居中布局
圆形渐变边框 <template><div class="wrapper"><div class="box gradient-border& ...

css实现圆形渐变色边框

首先介绍css3中实现边框渐变

使用border-image实现，代码和效果如下

回到我们的css，使用background-image的渐变功能

大致思路是在父元素设置渐变background-image，使用一个padding，我们把这个padding值当做子元素的边框值看待，代码效果如下：

css实现圆形渐变色边框相关推荐

最新文章

热门文章