css3设置div圆角后，div的背景颜色没有圆角，是直角的！

html-css08

css3设置div圆角后，div的背景颜色没有圆角，是直角的！,第1张

DIV设置圆角，背景是不是圆角根本就不用去考虑了，因为DIV圆角的那个部分包括背景是不显示，如果你的DIV设置了圆角，在浏览器里查看还是直角，那是因为圆角代码border-radius:5px这个是不兼容IE6、IE7、IE8的，其他浏览器都能显示正常

问题：css3做圆角右边是圆角左边是直角

解答：注意css改动这里，nav ul li{ float:left margin:0 20px background-color:#999border-radius:10px 0 0 10px -moz-border-radius:10px 0 0 10px font-size:30px}

理解：border-radius属性

1）border-radius:10px等价于：border-top-left-radius:10pxborder-top-right-radius:10pxborder-bottom-right-radius:10pxborder-bottom-left-radius:10px

2）border-radius:1px 2px 3px 4px 等价于：border-top-left-radius:1pxborder-top-right-radius:2pxborder-bottom-right-radius:3pxborder-bottom-left-radius:4px

纠错：您的html代码不全，我补全并修改后的代码如下，请查看~

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>Apple</title>

<style>

body{ background-color: #F2F2F2}

header {background-color:#333border-radius:10px}

nav{ display:block background-color:#333 width:840px margin:0 50px 0 0 padding:0 10px 20px 5px}

nav ul { list-style:none background-color:#999}

nav ul li{ float:left margin:0 20px background-color:#999border-radius:10px 0 0 10px -moz-border-radius:10px 0 0 10px font-size:30px}

nav ul li a{ color:#FFF text-decoration:none font-size:20px }

nav ul li a:hover{color:#000 text-decoration:none border-bottom:1px solid #ff5400 padding-bottom:2px}

</style>

</head>

<body>

<header>

<nav>

<div>

<ul>

<li><a>Apple</a></li>

<li><a>在线商店</a></li>

<li><a>Mac</a></li>

<li><a>ipod</a></li>

<li><a>iphone</a></li>

<li><a>ipad</a></li>

<li><a>iTunes</a></li>

<li><a>技术支持</a></li>

</ul>

</div>

</nav>

</header>

</body>

</html>

css圆角效果，IE6, firefox均显示正常

＜html＞

＜head＞

＜title＞css圆角效果--网页教学网＜/title＞

＜meta http-equiv="content-type" content="text/htmlcharset=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: hiddenbackground: #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＞