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>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html5离线存储有哪些
• 深入解析asp.net中mvc4自定义404页面（...
• h5新增标签audio与video的使用
• 你值得了解的HTTP缓存机制（代码详解）
• css3 如何实现圆边框的渐变? 如图

• PHP开发基础教程之简介
• JavaScript简介
• PHP新手入门之简介
• PHP开发基础教程之环境搭建
• php学习路线介绍