css于圆角效果~初学者看不懂,望老师指点一下

2012-03-20

css于圆角效果~~~~~菜鸟看不懂,望老师指点一下htmlheadtitlecss圆角效果--网站每日新/titlestyle

css于圆角效果~~~~~菜鸟看不懂,望老师指点一下
<html>
<head>
<title>css圆角效果--网站每日新</title>
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: 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 1px;height: 2px}
</style>
</head>
<body onload='alert(window.document.getElementById(linyuan).innerHTML)' oncontextmenu="event.returnValue=false;alert(event.button);">
<script language="javascript" type="text/javascript">

</script>
<div class="RoundedCorner" onclick="event.returnValue=false;alert(event.button);">






 无图片实现圆角框 






</div> 
</body>
</html>

在网上找的一段CSS 圆角效果的代码~~~~~~

其中关于标签的使用我有点不明白~~~代码中的标签都是一些空标签,给这些空标签(宽度,高度都没有)定义的样式为什么会起作用呢?

[解决办法]
b.rtop, b.rbottom{display:block;background: #FFF}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

要注意这个，第一行里面定义的是class=rtop和class=rbottom
而第二行定义的是第一个b标签的子b标签


 
 
 
 



 
 
 
 


就是红色部分。

也就是说{display:block;height: 1px;overflow: hidden; background: #9BD1FA} 这个样式，在红色部分里是要执行的！

热点排行