CSS边框的一些应用

分享一些CSS边框的应用案例

扇形：

.img{
				width: 500px;
				height: 250px;
				background: url(img/37317-106.jpg)no-repeat;
				background-size: 500px 250px;
				border: 2px solid black;
				border-radius: 250px 250px 0px 0px;	
			}

正方体异型：

.ban{
				width: 200px;
				height: 200px;
				border: 2px solid red;
				border-radius: 100px 0 0 0;
			} 

 

扇形2：

.sifen{
				 width: 200px;
				 height: 200px;
				 border: 2px solid red;
				 border-radius: 200px 0px 0 0;
			 } 

 

椭圆：

.heng{
				 width: 400px;
				 height: 100px;
				 border:2px solid red;
				 border-radius: 100% 100% 100% 100% ;
			 } 

 

竖状椭圆：

.shu{
				 width: 100px;
				 height: 400px;
				 border:2px solid red;
				 border-radius: 100% 100% 100% 100% ;
			 } 

 

半椭圆：

 .bantuo{
			width: 500px;
			height: 150px;
			margin: 50px;
			border: 2px solid red;
			border-radius:50% /100% 100% 0% 0%;
				
			 } 

 

4分之一圆：

.red{
				 width: 0px;
				 height: 0px;
				 border-width: 90px;
				 border-style: solid;
				 border-color: transparent;
				 border-right-color: red;
			     border-radius: 90px;
			 } 

圆饼：

.bing{
				 width: 200px;
				 height: 200px;
				 border: 120px solid red;
				 border-radius: 200px;
			 } 

铜钱装：

 .tongqian{
				 	 width: 200px;
				 	 height: 200px;
				 	 border: 150px solid red;
				 	 border-radius: 200px;
			 } 

空心正方形异型：

.mianbao{
				 width: 200px;
				 height: 200px;
				 border: 150px solid red;
				 border-radius: 200px 0 0 0;
			 } 

 

空心正方形双圆角：

.daobao{
				 width: 200px;
				 height: 200px;
				 border: 150px solid red;
				 border-radius: 200px 0 200px 0;
			 } 

 

实心4色正方形：

 .bobo{
				width:0px;
				height:0px;
				border-left: 150px solid red;
				border-right: 150px solid magenta;
				border-top: 150px solid aqua;
				border-bottom: 150px solid green;
			 } 

 

右边框透明正方形：

.you{
				 width:0px;
				 height:0px;
				 border-left: 150px solid red;
				 border-right: 150px solid transparent;
				 border-top: 150px solid aqua;
				 border-bottom: 150px solid green;
			 } 

 

吃豆人 :

.xiaoxiao{
				 width:0px;
				 height:0px;
				 border:150px solid red;
				 border-right: 150px solid transparent;
				 border-radius: 150px;

 

太极图1：

  .yinyang1{
				 width: 200px;
				 height: 100px;
				 border: 1px solid red;
				 border-radius: 200px 200px 0 0 ;
				 background-color: #FF0000; 
			 }
			 .yinyang2{
				 width: 200px;
				 height: 100px;
				 border: 1px solid black;
				 border-radius: 0 0 200px 200px  ;
				 background-color: black;
			 } 

 

 

太极图2：

 .yinyang4{
				 width: 180px;
				 height: 0px;
				 border-top-width: 90px;
				 border-bottom-width: 90px;
				 border-style: solid;
				 border-top-color: black;
				 border-bottom-color: red;
				 border-radius: 90px;  
			 }

太极图3：

.taiji1{
				width: 180px;
				height: 90px;
				border: 1px solid black;
				background-color: black;
				border-radius: 90px 90px 0 0;
			}
			 .taiji4{
				 width: 180px;
				 height: 90px;
				 border: 1px solid gray;
				 background-color: gray;
				 border-radius:0 0 90px 90px;
			 }
			 .taiji2{
			 	width: 90px;
			 	height: 45px;
			 	border: 1px solid gray;
			 	background-color: gray;
			 	border-radius: 45px 45px 0 0 ;
			 	position: absolute;
			 	left: 98px;
			 	top:55px; 
			 } 
			 .taiji3{
			 	width: 90px;
			 	height: 45px;
			 	border: 1px solid black;
			 	background-color: black;
			 	border-radius:0 0 45px 45px;
				position: absolute;
				top: 90px;
			 } 
		     .taiji5{
				 width: 10px;
				 height: 10px;
				 border: 1px solid black;
				 background-color: #000000;
				 border-radius: 10px 10px 10px 10px;
				 position: absolute;
				 left: 150px;
				 top: 90px;
			 }
			 .taiji6{
				width: 10px;
				height: 10px;
				border: 1px solid gray;
				background-color:  gray;
				border-radius: 10px 10px 10px 10px;
				position: absolute; 
				left: 40px;
				top: 90px;
			 }