css实现圆角的几种方法是什么?

html-css015

css实现圆角的几种方法是什么?,第1张

有四种方法可以实现圆角。

第一、直接写CSS代码:border-radius

第二、四个圆角贴图;制作四个圆角的图片,然后用css定义

第三、直接制作整个圆角矩形背景

第四、定义12个背景色:左上角4个,右上角4个,右下角4个,左下角4个。

一般是用画好的圆角图片充当背景来实现的,用photoshop画好圆角,切成需要的大小来填充背景即可

当然也有不要图片的做法,原理就是通过div来模拟像素的拐角,做法太极端,一般不采用。

这么多代码就为了生成一个圆角,有意思吗?能生成边线吗?

如果答案都是否定的,那么还是用图片好了,圆角方形切成3个部分,中间部分再切成一个像素自动填充,是不是更方便一点!

如果实在想用代码做,也不要做的那么傻,去下个jquery,再下个jquery圆角插件,网上很多,很简单的代码就能实现圆角了,问题还是这样的圆角是不能生成边线的!