css3 如何实现圆边框的渐变

css3 如何实现圆边框的渐变? 如图


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<style>
		div { width:100px; height:100px; -webkit-transform:rotate(90deg);}
		div:before {content:""; display:block; width:100px;height:50px; margin-top:10px; padding:10px; padding-bottom:0; box-sizing:border-box;
			border-top-left-radius:50px;
			border-top-right-radius:50px;
			background:-webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0,#fff),
				color-stop(1,#fff)
			),-webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0,#077df8),
				color-stop(1,#74baff)
			);
			background-clip:content-box,padding-box;
		}
		div:after {content:""; display:block; width:100px;height:50px; padding:10px; padding-top:0; box-sizing:border-box;
			border-bottom-left-radius:50px;
			border-bottom-right-radius:50px;
			background:-webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0,#fff),
				color-stop(1,#fff)
			),-webkit-gradient(
				linear,
				left top,
				right top,
				color-stop(0,#fff),
				color-stop(1,#74baff)
			);
			background-clip:content-box,padding-box;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

相关阅读:
Day 09 函数
Day 09 作业
Day 08 可变与不可变对象/列表与字典内置方法
Day 08 作业
Day 07 字符串内置方法和爬虫基础3
Day 06 流程控制和爬虫基础2
Day 05 文本处理和爬虫基础1
Day 04 作业
Day 04 数据类型基础
Day 03 Python 基础

原文地址：https://www.cnblogs.com/cgf19920817/p/4661005.html