用纯CSS样式实现的网页中圆角矩形（css代码）

html-css08

用纯CSS样式实现的网页中圆角矩形（css代码）,第1张

第一种

<html

xmlns:v>

<head>

<style>

v\:*{behavior:

url(#default#VML)}

</style>

</head>

<body>

<v:roundRect

style="position:absoluteleft:20pxtop:50pxwidth:200pxheight:140px"

FillColor="#e8e8e8"

Filled="T"

/>

刷新本页才能看到效果

</body>

</html>

======================================

第二种

css圆角效果，IE6,

firefox均显示正常

<html>

<head>

<title>css圆角效果--网站每日新</title>

<meta

http-equiv="content-type"

content="text/html

charset=gb2312">

<style

type="text/css">

div.RoundedCorner{background:

#9BD1FA}

b.rtop,

b.rbottom{display:blockbackground:

#FFF}

b.rtop

b,

b.rbottom

b{display:blockheight:

1pxoverflow:

hidden

background:

#9BD1FA}

b.r1{margin:

0

5px}

b.r2{margin:

0

3px}

b.r3{margin:

0

2px}

b.rtop

b.r4,

b.rbottom

b.r4{margin:

0

1pxheight:

2px}

</style>

</head>

<body>

<div

class="RoundedCorner">

<b

class="rtop"><b

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

class="r2"></b><b

class="r3"></b><b

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

<br>无图片实现圆角框<br><br>

<b

class="rbottom"><b

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

class="r3"></b><b

class="r2"></b><b

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

</div>

</body>

</html>

用border-radius属性来实现圆角功能

border-radius使用案例

<!doctype html>

<html>

<head>

<meta charset='UTF-8' />

<title>圆角功能</title>

<style type="text/css">

    #div1{

        border:1px solid #f00

        width:200px

        height:100px

        border-radius:4px<!--(左上角)--> 10px<!--(右上角)--> 20px<!--(右下角)--> 30px<!--(左下角)-->

    }

</style>

</head>

<body>

<div id="div1"></div>

</body>

</html>

在chrome、firefox、safari、IE9+等浏览器中圆角很容易实现，代码如下：

.div{

  -webkit-border-radius:5px//webkit内核

  -moz-border-radius:5px//mozilla

  -ms-border-radius:5px//IE

  -o-border-radius:5px//opera

  border-radius:5px//假设你希望圆角的幅度是5px

}

但是在IE6/IE7/IE8等低版本浏览器中是不可能通过css实现圆角的，必须借助背景图片才能实现。