css 如何编写一个反圆角呢?


摘要:
下文讲述使用css脚本实现一个“反圆角”的方法分享,如下所示:


实现思路:
使用一个半圆叠加到另外一个DIV上,形成一个反圆角

 
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>猫猫教程(www.maomao365.com)---绘制反圆角的方法</title>
  
  <style type="text/css">

   div{
     height:100px;
	 width:200px;
	 color:white;
	 padding:10px;
	 font-weight:bold;

	 background-color:blue;
	 border-radius:8px 0 0 8px;
     margin-top:10px;

	   position:relative; 
 

   }

   div:after,div:before{
       content:"";
       position:absolute;
      right:-8px;
      display:block;
      width:16px;
      height:16px;
      background-color:white;
      border-radius:50%; /*形成半圆*/
      z-index:11;
   }

  div:after{
     top:-10px;
  }


  div:before{
   bottom:-10px;
  }
  
}
    
  </style>

 </head>
 <body>
     

	 下文讲述css实现反圆角(扑克牌)边角样式<br />

	 <div>
       采用半圆叠加的方式 <br />
	   形成反圆角
	 </div>


     <div></div>
 
 <div></div>
<div></div>
<div></div>
<div></div>


 </body>
</html>

css 实现反圆角的方法分享

css 实现反圆角的方法分享