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. 如何开发一个产品级的Node.js 应用

    介绍 Node.js是一个开源的javascript运行时环境.非常简单可以快速开发一个网络应用.这个平台运行在Linux.OSX和Windows,而且运行在这个平台上的应用都是用javascript ...

  2. colorbox在android上由于高度太高无法scroll问题

    首先看问题截图: 我们可以看到弹出的colorbox页面的高度已经到了下面,你根本看不到"mistake cross"<=>"X". 我测试了iph ...

  3. C++互斥器：Mutex

    互斥器的功能是,使多个线程和谐工作.同一时间内,只能有一个线程得到互斥对象,并获得资源操作权限,那么如果同一时间其他线程也想去操作资源,此时就会因为Mutex未处于激发状态,而无奈的等待…这时候,线程 ...

  4. 在 IIS8 中保持网站持续运行

    在早期版本的 IIS 中执行轮询任务不那么可靠.应用程序池回收后,网站不会自动重启,在新的请求激活应用程序之前,轮询任务不起作用.为了解决这个问题,需要引入外力驱动 Web 端执行任务,如图: 此方式 ...

  5. Backup--查看备份还原需要的空间

    --====================================================== --使用于SQL SERVER 2008 和SQL SERVER 2008 R2 ) ...

  6. ftp服务器问题

    最近ftp服务器迁移,遇到了521问题,可以尝试以下几种方法:    1,服务器管理器->Web服务器->FTP服务器安装完:    2,检查相应文件夹的权限是否足够,    3,检查ft ...

  7. foreach写失效的问题

    本文由作者张远道授权网易云社区发布. 坦白讲身为程序员,bug在所难免.有人讲,bug越多,说明程序员越伟大.这句话有它一定的道理. 因为从某方面讲,bug多了说明他的代码量也多. 言归正传,这里我记 ...

  8. 机器学习、深度学习、和AI算法可以在网络安全中做什么？

    本文由  网易云发布. 本文作者:Alexander Polyakov,ERPScan的首席技术官和联合创始人.EAS-SEC总裁,SAP网络安全传播者. 现在已经出现了相当多的文章涉及机器学习及其保 ...

  9. 【转】4G18的低成本NA玩法

    首先是要再次强调一次,4G18的缸径是76MM,冲程是87.5MM.属于典型的长冲程低转发动机! 这种设计的优点是比较适合市区走停的工作状况,省油. 如果要针对改装方案而言因为这种低转时便可输出大扭矩 ...

  10. AJPFX简评：MT5平台

    MetaTrader 5全面改进的图表和扩展的功能 MetaTrader软件开发商在MT4获得全球交易商全面好评之后,又再次研发推出了更为先进的MT5交易软件.   MT5的主要特征●改进的图表和即时 ...