css圆角的写法！

html-css010

css圆角的写法！,第1张

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

1、css圆角实现的方式有很多种，最简单最方便的是使用border-radius属性。或者使用圆角图片。

2、border-radius后面直接接数值。

3、图片圆角就是事先切除圆角图片，可以制作定高，或者定宽的div。

4、使用border-radius的优点是无序添加多余结构代码，但是对于低版本的浏览器支持有问题。使用图片圆角不会有兼容问题，但是会多出多余的代码和结构。

无图片的圆角框,复制以下代码，储存为“border.html”直接运行即可。

<!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=gb2312" />

<title>无标题文档</title>

<style type="text/css">

*{padding:0margin:0}

.container {width:50%margin:10px auto}

.holder2 {color:#000}

/*无图片的圆角框*/

.b1 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#aaamargin:0 5px}

.b2 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fffborder-right:2px solid #aaaborder-left:2px solid #aaamargin:0 3px}

.b3 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fffborder-right:1px solid #aaaborder-left:1px solid #aaamargin:0 2px}

.b4 {height:2pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fffborder-right:1px solid #aaaborder-left:1px solid #aaamargin:0 1px}

.content {border-right:1px solid #aaaheight:200pxborder-left:1px solid #aaa}

</style>

</head>

<body>

<div class="container">

<div class="holder">

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>

<div class="content">

<p>CSS的圆角框</p>

</div>

<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

</div>

</div>

</body>

</html>