因为渐变可以接受一个角度，比如45deg作为方向，而且色标的位置信息也可以是绝对的长度值，不受容器尺寸的影响。把一个透明色标放在切角处，然后在相同位置设置另一个色标，并且颜色设置为想要的背景色。
4个切角，写几个 linear-gradient就是几个切角
2.使用clip-path
3.使用corner-shape
注：目前此方法还在测试中，还没有浏览器支持
【弧形切角（内凹圆角）】
css圆角效果，IE6, firefox均显示正常＜html＞
＜head＞
＜title＞css圆角效果--网页教学网＜/title＞
＜meta http-equiv="content-type" content="text/htmlcharset=gb2312"＞
＜style type="text/css"＞
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:blockbackground: #FFF}
b.rtop b, b.rbottom b{display:blockheight: 1pxoverflow: hiddenbackground: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1pxheight: 2px}
＜/style＞
＜/head＞
＜body＞
＜div class="RoundedCorner"＞
＜b class="rtop"＞＜b class="r1"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r4"＞＜/b＞＜/b＞
＜br＞无图片实现圆角框＜br＞＜br＞
＜b class="rbottom"＞＜b class="r4"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r1"＞＜/b＞＜/b＞
＜/div＞
＜/body＞
＜/html＞
