css圆角样式,css矩形圆角样式

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

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

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

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

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

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

如何用CSS代码设定按钮的圆角样式？

用CSS代码设定按钮的圆角样式，这个在css3中才能实现，通过使用border-radius来实现这个效果，不过有浏览器的兼容性问题，-moz(例如 -moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px 15px 20px 25px;它的意思就是上的圆角5px，右的圆角15px，下的圆角20px，左的圆角25px，通过例子来实际看下：

div id="round"/div

#round {

   padding:10px; width:300px; height:50px;

   border: 5px solid #dedede;

   -moz-border-radius: 15px;      /* Gecko browsers */

   -webkit-border-radius: 15px;   /* Webkit browsers */

   border-radius:15px;            /* W3C syntax */

}

效果如图：

如何用CSS做圆角

方法一：CSS3

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=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" /

titleBorder-radius/title

/head

body

div style="border-width: 1px;border-style: solid;-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;padding:5px;"在Firefox和Safari 3的浏览器里能看到圆角效果/div

/body

/html

方法二：CSS2

先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。 四个角使用绝对定位，定位在层的左上、右上、左下、右下位置。