Css3.0中有border-radius;属性可以绘制，当圆角设置为整个border一半大小的时候，还可以画出圆和椭圆。

这里讲一下一种暴力绘制的思路

其实方法很简单，圆角矩形和普通矩形的区别主要在于四个角。选其中一个放大到像素级别大致如图：

这里我们实现简单的暴力绘制。实际上就是把每个角上的几个像素画好。

很直白的直接把整个矩形分为好几个部分，中间是两条侧边，上部已经标识出来了，1234，总共四条线。1是横框的上边缘，2可以看成2px大小的竖框边缘（height为1px，实际上不设置height的话，默认就是1px），3为1px竖框边缘，4为height=2px的竖框边缘。

因此绘制起来，上方需要4个block元素的几个border。下方同理，中间一个block的左右两边。

	<div class="rect">
		<!--上边沿四根-->
		<div class="line l1_top"></div>
		<div class="line l2"></div>
		<div class="line l3"></div>
		<div class="line l4"></div>
		<!--左右两侧边框-->
		<div class="TwoLine"><b>绘制圆角矩形</b></div>  
		<!--下边沿四根-->
		<div class="line l4"></div>
		<div class="line l3"></div>
		<div class="line l2"></div>
		<div class="line l1_bottom"></div>
/*圆角矩形模块*/
.rect{
	margin:30px auto;
	width:50%;
.line{
	height:1px;
.TwoLine{
	height:80px;
	text-align:center;
	line-height:80px;
	border-left:1px solid black;
	border-right:1px solid black;
.l1_top{
	margin:0 5px;
	border-bottom:1px solid black;	
.l1_bottom{
	margin:0 5px;
	border-top:1px solid black;	
	margin:0px 3px;
	border-left:2px solid black;
	border-right:2px solid black;
	margin:0px 2px;
	border-left:1px solid black;
	border-right:1px solid black;		
	margin:0px 1px;
	height:2px;
	border-left:1px solid black;
	border-right:1px solid black;
根据border-radius中像素大小，圆角的造型也不一，当然border-radius在像素级别上精细的多。
 
上方为暴力绘制，下方为border-radius。这种暴力绘制的方法画出来的图效果还是比border-radius差很多
 
                    Css3.0中有border-radius;属性可以绘制，当圆角设置为整个border一半大小的时候，还可以画出圆和椭圆。这里讲一下一种暴力绘制的思路其实方法很简单，圆角矩形和普通矩形的区别主要在于四个角。选其中一个放大到像素级别大致如图： 这里我们实现简单的暴力绘制。实际上就是把每个角上的几个像素画好。很直白的直接把整个矩形分为好几个部分，中间是两条侧边，上部已经标识
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Do
				
今天要做一个圆角矩形的按钮，于是直接找圆角矩形的css实现方式，搞了半天，虽然也实现效果了，但是很复杂，需要用很多代码，后来突然想到以前做过的一个边框效果，也是圆角矩形，于是找了出来，发现这种办法相当简单并且效果一点也不差，这里简要分享一下。
关键部分都有注释。
				
要实现折角圆角矩形，可以使用 CSS3 的 border-radius 属性和 transform 属性。具体实现方法如下：
1. 首先设置一个矩形的 div 元素，设置宽度、高度、背景颜色等属性。
2. 使用 border-radius 属性设置四个角的圆角半径，例如：border-radius: 10px 20px 30px 40px; 分别表示左上角、右上角、右下角、左下角的圆角半径。
3. 使用 transform 属性中的 skew() 方法来实现折角效果，例如：transform: skew(30deg); 表示将元素向右下方倾斜 30 度。
以下是一个示例代码：
```html
<div class="box"></div>
```css
.box {
  width: 200px;
  height: 100px;
  background-color: #f00;
  border-radius: 20px 0 20px 0;
  transform: skew(30deg);