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 ...
随机推荐
- Python学习-27.Python中的列表（list）
列表已经用了很多次了.使用中括号包含元素. list = ['a','b','c'] 获取元素使用[]. print(list[0]) 输出a 不过值得注意的是,[]只能是0到元素个数-1吗?在Pyt ...
- Ubuntu/Debian下通过Apt-get简单安装Oracle JDK
近几年本人对各种Arm小板,开发板不明原因中毒,基本以Linux系统为主,本篇文章以记录在32位Arm的Debian8上,通过Apt-get的简单命令安装Oracle JDK8并成功的记录. 1.首先 ...
- 疑难杂症--SQL SERVER 2012下数据库内存异常回收
--=================================================================== --背景: 在一台SQL SERVER 2012 SP1(1 ...
- ASP.NET控制HTTP缓存
请求 响应 If-Modified-Since Last-Modified If-None-Match ETag 至于Expires和Cache-Control 附上几张高手的图 Etag 在使用 ...
- 微信小程序支付C#后端源码
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- Android 流媒体播放 live streaming
安卓支持的协议 RTSP (RTP, SDP)HTTP/HTTPS progressive streamingDynamic adaptive streaming on HTTP => MPEG ...
- Flask基础-基础实例
1. 10行代码的迷你程序 flask项目 from flask import Flask app = Flask(__name__) @app.route("/index") d ...
- 如何利用Python绘制一个爱心
刚学习Python几周,闲来无事,突然想尝试画一个爱心,步骤如下: 打开界面 打开Python shell界面,具体是Python语言的IDLE软件脚本. 2.建立脚本 单击左上角’File’,再单击 ...
- 《Python绝技：运用Python成为顶级黑客》 用Python进行渗透测试
1.编写一个端口扫描器 TCP全连接扫描.抓取应用的Banner #!/usr/bin/python #coding=utf-8 import optparse import socket from ...
- django 获取外键对应数据的方式
模型 models.py中 from django.db import models class User(models.Model): name = models.CharField() class ...