css实现可拉升圆角特效

作者:林炜贤来源:www.163css.com发表时间:(2011-09-08)

这个可以当作学习来用,至于在工作中能不能用上,我也说不上,但作为对css的学习,的确是一个提高。

当我们在制作圆角背景的时候,我喜欢用背景图,当然了,有人也提出用CSS实现,但我总觉得用上中下三个小图,很方便就实现了,从网页的角度来说,向下可以无限扩展,不好吗?

今天我向大家介绍的是这样一个例子,我制作了一张非常大的图片,1440*1440,不过中间是透明,大小是4.5KB左右,这图片有个特点,左上右下左下是空的,其余是有线,你看图就明白。

这里需要注意,图片的左上,左下,右下有一段是空的。。

我定义了左上右上左下右下四个div,通过定位,实现了在一定范围内可以拉升的效果,不过超过了700px就不行了,用户可以自己定义图片大小。

以下是我制作的效果截图:

用户可以拉升浏览器试试。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/201109/cssyj/index.html

下载地址:css实现可拉升圆角特效.zip

返回作者主页:www.163css.com阅读 (4961)
更多 1