有四种方法可以实现圆角。
第一、直接写CSS代码：border-radius
第二、四个圆角贴图；制作四个圆角的图片，然后用css定义
第三、直接制作整个圆角矩形背景
第四、定义12个背景色：左上角4个，右上角4个，右下角4个，左下角4个。
我用两个div写的实现楼主所说效果.div1 {
width:100px
height:100px
background-color:transparent
border:4px solid red
border-radius:60px
margin-top:20px
}
.div2 {
width:60px
height:60px
background-color:#fff
z-index:1
border-radius:45px
position:absolute
top:0
left:80px
}
还有一个是用HTML5的canvas标签，不过得用JS
举例说明CSS圆角在CSS2和CSS3里的实现方法在网页设计越来越精美的今天，圆角的应用已经越来越广泛这篇文章将分别讲述圆角在CSS2和CSS3里的创建方法。
从易用性来说，CSS3不需要额外的标记和图片，遂宁做网站比CSS2要先进得多。但当应用在网站上时，采用CSS2能使页面在主流浏览器上的效果更加一致。 下面将详细阐述创建圆角的各种方法和其对浏览器的兼容性。
用CSS2创建圆角的方法
1.固定宽度的圆角
这个是最简单的方法最多只需要使用两个图片（顶部和底部），并且也不需要添加额外的标记。在这里，我使用以下两个图片做背景：
优点：
用最少的标记和图片实现了圆角效果（CSS好点的童鞋只要一个图片就可以搞定了）。
缺点：
不够灵活，每次更改框架的宽度都要更新背景图片。
2.灵活的圆角
为了能让圆角更加灵活，我们可以把容器里的每个圆角都做成一个独立的元素，通过CSS强行定位到父容器的四个角上。在这个方法里，我们只需要用到右 边这个图片。
优点：
能自动适应父容器的大小，浏览器兼容性非常强。
缺点：
为了实现圆角，添加了一些没有意义的标记。
用CSS3创建圆角的方法
1.Border radius（边界半径）
W3C建议已经建议为boder增加几个属性选项，其中之一就是border-radius，目前这个属性已经被Firefox和Safari 3(Chrome)支持，比较遗憾的是IE不支持此属性。
优点：
这种方法不需要添加任何多余的标记，而且可以非常方便睇修改圆角的半径，是最易上手的方法。
缺点：
虽然符合W3C的标准，但缺乏浏览器支持。
2.多个背景图片
CSS3对background属性做出了一些重大改进，在CSS3标准里，我们可以把多个背景图片应用到同一个元素里。我们利用这个特性为容器加 上圆角效果。HTML代码与上例保持一致，在CSS中需要先把四个圆角的图片分别做好
优点：
没有多余的标记，可以分别设置每个圆角的半径。
缺点：
使用了W3C未明确定义的方法，浏览器兼容性很差，目前只有Safari和Chrome对此方法支持良好。
3.Border Image(图形边界)
使用图片作为border将是未来使用最广泛的CSS属性之一，这个属性是对border-style的升级。此属性允许您切片成的规则的9个不同部分的 图像，然后在浏览器便会作为border的基本形状来进行渲染。如右图，这种技术称为九切片缩放，可以避免圆角出现失真。我们不需要手动切开图片，CSS 能帮我们实现切片功能。
优点：
不需要添加多余的标记，使用非常简单，而且可以自由改变每个圆角的半径。
缺点：
W3C并为确定这个属性的使用方法，目前只可以用浏览器的私有属性实现，浏览器兼容性较差。目前支持这个方法的游览器有 Firefox，Chrome，Safari，Opera。
后记：
网页圆角的实现方法是目前争议较大的一个话题。还有一个通过由若干个不同宽度的Div组合做出圆角的方法，该方法对浏览器的兼容性是最强的，由于篇 幅所限，没有提及。虽然本文提及的方法都有明显的缺点，但在浏览器更新越来越快的今天，我们可以预见旧式浏览器将很快被淘汰，权当是对未来CSS写法的预 习吧。
