CSS3 border-radius 属性

向 div 元素添加圆角边框

border-radius画几个圆玩玩border-radius画几个圆玩玩


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.border-radius{
				border-radius: 10px 20px 30px 20px;
				width: 100px;
				height: 100px;
				background-color: greenyellow;
			}
			.border-circle{
				border-radius: 50px;
				width: 100px;
				height: 100px;
				background-color: gold;
			}
			.border-up-semi-circle{
				border-radius: 50px 50px 0 0;
				width: 100px;
				height: 50px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           0px;
				background-color: goldenrod;
			}
			.border-down-semi-circle{
				border-radius: 0px 0px 50px 50px;
				width: 100px;
				height: 50px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           0px;
				background-color: red;
			}
			.circle-box{
				width: 100px;
				height: 100px;
			}
			.borde-up-left-semicircle{
				border-radius: 50px 0px 0px 0px;
				width: 50px;
				height: 50px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           0px;
				background-color: green;
				float: left;
			}
			.borde-up-right-semicircle{
				border-radius: 0px 50px 0px 0px;
				width: 50px;
				height: 50px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           0px;
				background-color: yellow;
				float: left;
			}
			.borde-down-right-semicircle{
				border-radius: 0px 0px 50px 0px;
				width: 50px;
				height: 50px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           0px;
				background-color: red;
				float: left;
			}
			.borde-down-left-semicircle{
				border-radius: 0px 0px 0px 50px;
				width: 50px;
				height: 50px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           0px;
				background-color: orange;
				float: left;
			}
		</style>
		
	</head>
	<body>
		<div class="border-radius"></div>
		<div class="border-circle"></div>
		<div class="border-up-semi-circle"></div>
		<div class="border-down-semi-circle"></div>
		<div class="circle-box">
			<div class="borde-up-left-semicircle"></div>
			<div class="borde-up-right-semicircle"></div>
			<div class="borde-down-left-semicircle"></div>
			<div class="borde-down-right-semicircle"></div>	
		</div>
	</body>
</html>
效果图:

border-radius画几个圆玩玩border-radius画几个圆玩玩

作者:星辰 时间:2016-10-25 浏览 797评论 0 赞 0砸 0 标签: css3 demo
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款