新年就这样过去了，其实paperen都觉得新年好像越来越没意思，都是与亲戚们到处吃饭，自己还是喜欢吃家里的饭，而且到外面吃paperen我一定吃不饱的……最近几天聚会也很多，加上前天服务器维护所以导致今天才能写写文章。?

话说N久之前paperen我就想在网页中使用圆角形来做，看过一些css书中也有相关介绍，某些做法也是很麻烦的，对html结构很不好，而如果大家有对css3有了解的话也知道css3中已经有支持圆角形的css了，只不过不是每个浏览器都能解析，特别是ie，也就是说你还是得安安分分想其他办法去应付ie浏览器中的圆角形效果，而这里也稍微说说自己曾经与现在制造圆角形的方法。?

因为对于css3的圆角形的css代码普遍不被支持，所以paperen一般还是使用图片来制造圆角形的效果。?

而曾经paperen是这样制造圆角形的。

?

(虚线是表示按照虚线来切图，或者如果需要标题的话头部应该留高一点)这样貌似也是一种方法，html结构可以写成这样

<div class="container">
<h5 class="t"></h5><!--或者可以扩展一下头部标题的作用，需要统一定义padding与margin啦-->
<p class="b"></p><!--用于放内容的-->
<span class="f"></span><!--用于底部那张图片-->
</div>

?

<div class="container">
  <div class="l">
   <h1 class="t">我是圆角形的啊<a href="#" class="more">更多</a></h1>
  </div>
</div>

贴上这个的css，相比于第一种方法，这个html结构比较简单而且巧妙处在css中充分利用了padding这个内边框属性还有图片定位显示

.container{margin:5px;background:url(my.gif) no-repeat 0px 0px;width:250px;}
.l{background:url(my.gif) no-repeat 100% -70px;padding:0px 7px 0px 7px;}
.t{background:url(my.gif) repeat-x 0px -35px;font-size:12px;height:22px;padding:8px 8px 0px 8px;position:relative;}
.t .more{position:absolute;right:7px;}

其实都是使用相同的图片，只不过是显示的位置不一样。

它们之间的垂直距离是5px，彼此都是30px高。?

其实还有一种最方便的方法实现圆角形，就是css3中的Border-radius属性，但是

不是每个浏览器都能对它很好的支持的啊……

.test{border-width:1px;border-style:solid;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:5px;}

将一个容器加上class属性是test，然后在火狐中看看它的边框已经是圆角形了，但是ie中却不行，包括opera。这就是大名鼎鼎的，浏览器对css兼容的问题啦。?

话说回来不知道大家看了上面的三种方法有什么体会，paperen就觉得一二种都不是很完美的方法，因为容器的高度是固定了，如果一改变高度则需要修改图片与css的数值，并不具有可适应的优点，记得以前在看css书的时候曾经看到有一种办法是可以制造有弹性的圆角形的，不过那时候paperen看到它的html有点复杂没有记下来。而至于第三种方法嘛，确实很废……如果你只考虑火狐中网页的效果的话是可以使用，但是如果还要保证ie中看的效果你还是老老实实用图片的方法来做吧，或者用其他比我这里说的更好的办法去弄吧。