css于圆角效果~初学者看不懂,望老师指点一下
日期：2014-05-17 浏览次数：20571 次
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);">
<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> <b class="r3"><b class="r1"></b></b>
</body>
</html>
在网上找的一段CSS 圆角效果的代码~~~~~~
其中关于</b>标签的使用我有点不明白~~~代码中的</b>标签都是一些空标签,给这些空标签(宽度,高度都没有)定义的样式为什么会起作用呢?
------解决方案--------------------
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标签
<b class="rtop">
<b class="r1"> </b>
<b class="r2"> </b>
<b class="r3"> </b>
<b class="r4"> </b>
</b>
<b class="rbottom">
<b class="r4"> </b>
<b class="r3"> </b>
<b class="r2"> </b>
<b class="r1"> </b>
</b>
就是红色部分。
也就是说{display:block;height: 1px;overflow: hidden; background: #9BD1FA} 这个样式，在红色部分里是要执行的！
<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);">
<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> <b class="r3"><b class="r1"></b></b>
</body>
</html>
在网上找的一段CSS 圆角效果的代码~~~~~~
其中关于</b>标签的使用我有点不明白~~~代码中的</b>标签都是一些空标签,给这些空标签(宽度,高度都没有)定义的样式为什么会起作用呢?
------解决方案--------------------
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标签
<b class="rtop">
<b class="r1"> </b>
<b class="r2"> </b>
<b class="r3"> </b>
<b class="r4"> </b>
</b>
<b class="rbottom">
<b class="r4"> </b>
<b class="r3"> </b>
<b class="r2"> </b>
<b class="r1"> </b>
</b>
就是红色部分。
也就是说{display:block;height: 1px;overflow: hidden; background: #9BD1FA} 这个样式，在红色部分里是要执行的！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
