css 边框颜色渐变的半圆
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 边框颜色渐变的半圆的更多相关文章
- css边框颜色渐变
在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 <!DOCTYPE html> <html lang=&quo ...
- css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变
css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...
- css文字颜色渐变的3种实现
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...
- CSS 竖线颜色渐变
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- css背景颜色渐变
1.效果 2.代码 /* 基本色 */ background: #3FB0AC; /* chrome 2+, safari 4+; multiple color stops */ background ...
- css颜色渐变在不同浏览器的设置
在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 ...
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- css盒子模型之边框宽度，边框颜色与边框样式
/* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...
随机推荐
- 关于RabbitMQ一点
RabbitMQ是AMQP(高级消息队列协议)的标准实现,理论上可以保证消息发送的准确性 RabbitMQ是用Erlang语言编写的,而Erlang语言具有以下特点: 并发性--Erlang支持超大量 ...
- 自定义方法实现strcpy,strlen, strcat, strcmp函数,了解及实现原理
位置计算字符串长度 //strlen()函数,当遇到'\0'时,计算结束,'\0'不计入长度之内 //字符串的拷贝 //strcpy(字符串1,字符串2); //把字符串2 ...
- 设置p标签可编辑
一,只可编辑,粘贴复制字段长度不正常 <p contenteditable="true" >这是一个可编辑内容的p标签啦啦~</p> 二,可编辑,可粘贴复制 ...
- HDU6027 Easy Summation 2017-05-07 19:02 23人阅读 评论(0) 收藏
Easy Summation Time Limit: 2000/1000 MS ...
- hdu 5001 从任意点出发任意走d步不经过某点概率
http://acm.hdu.edu.cn/showproblem.php?pid=5001 给定n个点m条边的无向图问从任意点出发任意走d步,从不经过某个点的概率 本想先算路过每个点的概率然后用1减 ...
- Jack Clark 的几句名言
Grateful for everything; entitled to nothing. 沒有任何事情是你不该感激的:沒有任何东西是你该派得到的. Leadership is the ability ...
- C# 中数组、ArrayList、List<T> 区别
一:数组 //定义 ]; //赋值 strs[] = "A"; strs[] = "B"; //修改 strs[] = "C"; //取值 ...
- .Net Core 自定义配置源从配置中心读取配置
配置,几乎所有的应用程序都离不开它..Net Framework时代我们使用App.config.Web.config,到了.Net Core的时代我们使用appsettings.json,这些我们再 ...
- VS2017按F1使用中文帮助
VS2017使用时,按F1出来在线英文帮助,可以稍作改动,出来中文帮助. 1.进入安装文件,选择单个组件,勾选Help Viewer. 2.安装完成后,在IDE中选择在线查看器中启动.
- redis的常用公共方法（2）
之前已经写过一篇redis公共方法的使用(https://www.cnblogs.com/jhy55/p/7681626.html),可是发现在高并发的时候出现 Unknown reply on in ...