1.需求有这么个东西,个人不习惯背景图片来解决,开始了css尝试。

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框渐变的拱形</title>
<style> .circle{
width: 200px;
/*height: 200px;*/
line-height: 100px;
text-align: center;
margin: 100px;
/*background-color: red;*/
}
.semi-circle {
border-radius: 200px 200px 0 0 ;
height: 100px;
border: 20px solid red;
border-bottom: 0;
/*border-image: -moz-linear-gradient(green,blue);
border-image: -webkit-linear-gradient(green,blue);
border-image: linear-gradient(to right,green,blue) 30 30;*/
} </style>
</head>
<body>
<div class="circle semi-circle"></div> </body>
</html>

2.基于上图 尝试用背景渐变来解决,so border-image上了,(不要问为啥不用border-color),但是圆角没有了,因为他们都是对border的设置。后从网上看到有伪类去做的背景渐变的按钮。

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框渐变的拱形</title>
<style> .border{
position: relative;
border: 4px solid transparent;
border-radius: 16px;
background: linear-gradient(orange, violet);
background-clip: padding-box;
padding: 10px;
/* just to show box-shadow still works fine */
box-shadow: 0 3px 9px black, inset 0 0 9px white;
}
.border::after{
position: absolute;
top: -4px; bottom: -4px;
left: -4px; right: -4px;
background: linear-gradient(red, blue);
content: '';
z-index: -1;
border-radius: 16px;
} </style>
</head>
<body> <div class="border"></div> </body>
</html>

效果如下:

3.然后开始改造

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框渐变的拱形</title>
<style> .border1{
width: 200px;
height: 200px;
margin:100px auto; position: relative;
border: 1px solid transparent;
border-radius: 200px;
background: white;
background-clip: padding-box;
padding: 10px;
}
.border1::after{ position: absolute;
top: -40px;
bottom: -40px;
left: -40px;
right: -40px;
background: linear-gradient(to right,red, blue);
content: '';
z-index: -1;
border-radius: 200px;
} </style>
</head>
<body> <div class="border1"></div> </body>
</html>

4.再次改造

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框渐变的拱形</title>
<style> .border2{
width: 200px;
height: 100px;
margin:100px auto; position: relative;
border: 1px solid transparent;
border-bottom: 0;
border-radius: 200px 200px 0 0;
background: white;
background-clip: padding-box;
padding: 10px;
}
.border2::after{ position: absolute;
top: -40px;
bottom: 0px;
left: -40px;
right: -40px;
background: linear-gradient(to right,red, blue);
content: '';
z-index: -1;
border-radius: 200px 200px 0 0;
}
</style>
</head>
<body> <div class="border2"></div>
</body>
</html>

最终达到想要的效果。

css 边框颜色渐变的半圆的更多相关文章

  1. css边框颜色渐变

    在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 <!DOCTYPE html> <html lang=&quo ...

  2. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  3. css文字颜色渐变的3种实现

    在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...

  4. CSS 竖线颜色渐变

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

  5. css背景颜色渐变

    1.效果 2.代码 /* 基本色 */ background: #3FB0AC; /* chrome 2+, safari 4+; multiple color stops */ background ...

  6. css颜色渐变在不同浏览器的设置

    在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 ...

  7. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  8. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. css盒子模型之边框宽度,边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

随机推荐

  1. 绩效沟通的best原则

    绩效沟通-BEST原则 BEST原则指在进行绩效/IDP面谈的时候按照以下步骤进行: 案例:小赵经常在制作标书时候犯错误 Behavior description 描述行为 小赵,8月6日,你制作的标 ...

  2. javascript 奇技淫巧45招

    教程:http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best-practices.html 1.上线前检查和压缩代码:用 ...

  3. 二:nodejs+express+redis+bootstrap table+jquery UI

    介绍:做一个量化投资的实时系统. 综合: 添加记录,顺序改变的话,refresh之后,能正常刷新吗?可以正常刷新,只是顺序又变回去. express中用fs readfile 时,需要用path.jo ...

  4. 如何处理App的Application的事件

    http://blog.sina.com.cn/s/blog_44fa172f0102vwr2.html 直接上代码,还有条经验就是SetApplicationEventHandler可注册多个事件方 ...

  5. Failed to get D-Bus connection: Operation not permitted

    通过centos7镜像创建了一个docker容器,并在容器中安装了一个apache服务,但是启动时发生如下报错 [root@1346963c2247 ~]# rpm -qa | grep httpdh ...

  6. LeetCode151:Reverse Words in a String

    题目: Given an input string, reverse the string word by word. For example,      Given s = "the sk ...

  7. Spring Boot 2 实践记录之 组合注解原理

    Spring 的组合注解功能,网上有很多文章介绍,不过都是介绍其使用方法,鲜有其原理解析. 组合注解并非 Java 的原生能力.就是说,想通过用「注解A」来注解「注解B」,再用「注解B」 来注解 C( ...

  8. 万恶的KPI、新兴的OKR及让人纠结的程序员考核

    最近两天在研究研发部门如何进行绩效管理(其实一直都在思考,关注,实践,总感觉无从下手,也想求助咨询公司,无奈囊中羞涩).查了两天的资料,主要的方向是KPI,OKR,谷歌等互联网公司的考核方法.这里做个 ...

  9. NET 时间字符串转换

    // 把指定格式的日期字符串转换为时间:2018/11/1 0:00:00 DateTime.ParseExact("2018a11","yyyyaMM",Sy ...

  10. .Net应用程序 参照的组合没有安装在您的系统中。 HRESULT: 0x800736B3

    同事打开一个.Net的应用程序链接,一直无法启动.错误信息为: 啓用xx.application 時發生例外狀況. 已偵測到下列失敗訊息:參照的組合沒有安裝在您的系統中. (發生例外狀況於 HRESU ...