实现切角效果需要掌握的几个点包括： css渐变、background-size、条纹背景
直角切角
先实现一个简单的，比如让一个矩形，右下角切掉。实现该功能可以使用强大的渐变功能，有了渐变基础，应该不难理解。
注：background: #58a不是必须的，加上它是为了将其作为回退机制。
实现两个切角，左右下角各一个。一层渐变肯定不行，需要两层。按想法一步步实现，首先可能会这样写，想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。
可以看到，效果并没有实现，原因是两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们缩小一点，使用background-size让每层渐变分别只占据整个元素的一半。
依然没有达到效果，这是因为没有添加background-repeat属性，因而每层渐变图案各自平铺了两次。
好了，现在实现了。如果要四个角的话，就要四层渐变了。
就这样一个切角效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！
方法一：CSS3里才有的圆角设置<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Tencent-ISRD" />
<meta name="Copyright" content="Tencent" />
<title>Border-radius</title>
</head>
<body>
<div style="border-width: 1pxborder-style: solid-moz-border-radius: 11px-khtml-border-radius: 11px-webkit-border-radius: 11pxborder-radius: 11pxpadding:5px">在Firefox和Safari 3的浏览器里能看到圆角效果</div>
</body>
</html>
方法二：CSS2里设置背景图片
先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。 四个角使用绝对定位，定位在层的左上、右上、左下、右下位置。
用Img标签插入网页呀。都没懂，你想表达什么意思？
你给图片做圆角不用自己切图呀。css可以支持圆角。
我觉得 你可以改变下问题得方式，
1，说出你想达到的效果，尽量截图。你说“是在一张图上面的（左中右）”，听了似乎真不知道想说什么。
2，怎么添加到网页中。 不明白你是不懂用img标签加入呢，还是可以加入到网页中，只是无法达到你的要求。
3，<li><span><span>急哦就急哦就</span></span></li>。你大可以将代码以Html代码的形式，嵌入的问题里面。如
<table><tr>
<td><input id="n" name='a' align="left" class="numberbox" type="text"></td>
<td><input id="m" name='b' align="left" class="numberbox" type="text"></td>
</tr>
</table>
你光急没用呀，别人想帮助你都无从下手呀。
希望对你以后提问方面有所帮助。站在阅读者的角度看问题。
回答补充：
那你可以将做号的圆角图片切成3部分
第一部分包含左边的圆角，第二部分包含右边的圆角，第三部为长方形普通图片。最后用他们三个做背景图片，然后还是需要用CSS控制收缩，即两张角不变，内容长方形图片伸缩，来满足你的内容伸缩变化，如果还要适应上下伸缩，那解决方案是将每个角都切成图片。PS:你也可以PS成一张图片，包含几种内容，用background-image 的position属性设置显示哪部分。
希望对你有帮助！
