css实现 圆角的 几种方法

html-css017

css实现 圆角的 几种方法,第1张

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

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

例如:border-radius:4px或者可以四个不同圆度:border-radius:4px 4px 3px 3px

顺序是左上角,右上角,右下角,左下角

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

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

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

<b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b

class="r4"></b></b>

<b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b

class="r1"></b></b>

<b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b

class="rb4"></b><b class="rb5"></b></b>

<b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b

class="rb2"></b><b class="rb1"></b></b>

方法一: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。 四个角使用绝对定位,定位在层的左上、右上、左下、右下位置

根据你所要求的,我只有两种办法: 第一种: border-width:1pxborder-style:solid-moz-border-radius:11px-khtml-border-radius:11px-webkit-border-radius:11pxborder-radius:11pxpadding:5px以上的css属性控制一个div就有圆角框了,但部分浏览器不支持。 第二种: 将背景直接用一个圆角图片替换,此方法最简单