自己遇到的一个需求，圆形的border加载。初听大家一定认为很简单，确实很简单，但是突然又加了一个需求，就是border的颜色要进行渐变，用了很多方法，可以实现渐变，直接的一个css属性是border-images，但是这个属性用上去之后，border就不能做成圆形了。网上也找了很多的资料，最多的就是用svg和canvas自己来画的，但是感觉很麻烦。最后自己用了一个异想天开的做法，就是让外边的background的背景色渐变，然后吧border的颜色设置成灰色，让底部的颜色一点一点显示。下边上代码！！！！

<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap,.circle,.percent{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.wrap{
top:50px;
left:50px;
background-color: #ccc;
background: linear-gradient(black,pink)
}
.circle{
box-sizing: border-box;
border:20px solid rgba(204,204,204,0);
clip:rect(0px,100px,200px,0px);
}
.clip-auto{
clip:rect(auto, auto, auto, auto);
}
.percent{
box-sizing: border-box;
top:-20px;
left:-20px;
}
.left{
transition:transform ease;
border:20px solid rgba(204,204,204,1);
/* clip: rect(0px,100px,200px,0px); */
clip: rect(0px,100px,200px,0px);
transform: rotate(0deg);
}
.right{
border:20px solid rgba(204,204,204,1);
clip: rect(0,200px,200px,100px);
transform: rotate(0deg.wth0{

width:0;
}
.num{
position: absolute;
box-sizing: border-box;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 40px;
left: 20px;
top: 20px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
</style>

</head>
<body>
<div class="wrap">
<div class="circle clip-auto">
<div class="percent left "></div>
<div class="percent right "></div>
</div>
</div>
</body>
</html>

缩进什么的就不做了，如果有兴趣，看到文章的人可以自己去复制，缩进。控制也很简单。只需要控制right的类rotate（）就可以，不过要说一下，在rotare（180deg）的时候，要去掉lclip-auto的类，并且要改变left的clip的属性，改成（200px 100px 200px 0）

圆形border渐变加载的更多相关文章

  1. WPFbutton样式

    有四款button不同的风格 <Window x:Class="SjglzxRj.Window3" xmlns="http://schemas.microsoft. ...

  2. css+js调整当前界面背景音量

    展示效果 html代码: <div> <audio id="audio" controls src="https://dbl.5518pay.com/r ...

  3. H5滑条(input type=range)

    input[type=range] { -webkit-appearance: none; width: 230px; border-radius: 10px; /*这个属性设置使填充进度条时的图形为 ...

  4. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  5. HMTL5滑动块研究

    滑动块图片 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  6. openlayers添加弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. openlayers按坐标点播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. openlayers轨迹匀速播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. openlayers轨迹播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. python --- socket模块详解

    socket常用功能函数: socket.socket(family=AF_INET, type=SOCK_STREAM, proto=0, fileno=None)                  ...

  2. 入坑IT十年（二）技术以外

    上一篇博客里提到:技术越来越简单,发布后不久,就看到<技术并不是越来越简单>,这显然是打擂台来了. 技术究竟是不是越来越简单?其实这个问题,要看你究竟是以什么角度来思考这个问题.我们可以举 ...

  3. git gc -- 压缩历史信息

    格式:           git gc  [选项] <path> 选项 git commit -a 提交所有改动的文件(a -- all) NOTE: XX 举例 压缩历史消息 git ...

  4. Python自学笔记-面向对象相关（Mr seven）

    ---恢复内容开始--- http://www.cnblogs.com/wupeiqi/articles/5433893.html 类的成员可以分为三大类:字段.方法和属性. 一.字段 字段包括:普通 ...

  5. python之字典

    1.用{}创建字典 代码: 1 2 x = {"a":"1", "b":"2"} print x 输出: {'a': ' ...

  6. MVC中View界面数据呈现示例

    @using System.Text; @model List<MvcShopping.Models.ProductCategory> @{ ViewBag.Title = "测 ...

  7. DevOps之网络

    唠叨话 关于德语噢屁事的知识点,仅提供专业性的精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <网络(Network)> 关于网络的网络架构和网络模型:知识与技能的层次(知道. ...

  8. IDEA Maven 三层架构 1、基本的Archetype 搭建

    JDK:1.8 Maven:3.3.9 三层架构:基于 SpringMVC 的 UI 层.业务逻辑层以及数据访问层 从对 Maven 的了解可以看出,三层架构的创建在于对文件夹的合理安排,他们通常是主 ...

  9. Hexo+Github搭建博客

    要使用Hexo,需要在你的系统中支持Nodejs以及Git,如果还没有,那就开始安装吧! 安装Node.js 下载Node.js 参考地址:安装Node.js 安装Git 下载地址:http://gi ...

  10. Python学习常用的好网站

    以下总结出自己在学习python期间常用的网址或者资源,其中包括很多人的博客,方便自己从这个入口查找资源. 1.https://www.liaoxuefeng.com/wiki/00143160895 ...