用一个图片就可以做出圆角div, 看代码!
- <style>
- .tb{
- width: 181px;
- background: #8cc355 url(bottom.gif) no-repeat left bottom;
- }
- .tb h1{
- padding: 10px 10px 0px 10px;
- background: #8cc355 url(top.gif) no-repeat left top;
- }
- .tb p{
- padding: 0px 10px 10px 10px;
- }
- a,a:active, a:link, a:hover, avisited{
- font-size:14px;
- font-weight: bold;
- color: blue;
- text-decoration: none;
- }
- a:hover{
- font-size:14px;
- font-weight: bold;
- color: red;
- text-decoration: underline;
- }
- #corner {
- width: 220px;
- }
- #corner .top{
- height: 10px;
- overflow: hidden;
- }
- #corner .top .top-left{
- width: 10px;
- float: left;
- background: url(corners.gif) no repeat left top;
- }
- #corner .top .top-center{
- border-top: solid #8CB4D0 1px;
- width: 200px;
- float: left;
- }
- #corner .top .top-right{
- width: 10px;
- float: left;
- background: url(corners.gif) no-repeat right top;
- }
- .bottom{
- height: 10px;
- overflow: hidden;
- }
- .bottom-left{
- width: 10px;
- float: left;
- background: url(corners.gif) no repeat;
- background-position: 0 -10px;
- }
- .bottom-center{
- border-bottom: solid #8CB4D0 1px;
- width: 200px;
- height: 10px;
- overflow: hidden;
- float: left;
- }
- .bottom-right{
- width: 10px;
- float: left;
- background: url(corners.gif) no-repeat;
- background-position: -10px -10px;
- }
- .content{
- border-left: solid #8CB4D0 1px;
- border-right: solid #8CB4D0 1px;
- padding: 0px 10px;
- }
- </style>
- <div class="tb">
- <h1><a href="#">TITLE</a></h1>
- <p>THIS THE CONTENT</p>
- </div>
- <br>
- <div style="height: 5px; width: 50px; border: solid red 1px; overflow: hidden"></div>
- <br>
- <div id="corner">
- <div class="top">
- <div class="top-left"></div>
- <div class="top-center"></div>
- <div class="top-right"></div>
- </div>
- <div class="content">this is the content
- <br>this is the contentthis is the contentthis is the contentthis is the contentthis is the content</div>
- <div class="bottom">
- <div class="bottom-left"></div>
- <div class="bottom-center"></div>
- <div class="bottom-right"></div>
- </div>
- </div>
=============================================
/**JS画图,JS小游戏,JS代码集合, JS地图,JS写RPG游戏,JS动画,JS绘图, JS对象, JS函数, JS经典 例子,JS面向对象, javascript画图,javascript小游戏,javascript代码集合, javascript地图,javascript写RPG游戏,javascript动画,javascript绘图, javascript对象, javascript函数, javascript经典例子,javascript面向对象,css网站,css资源,css代码,css学习,css下载,css教程,css分享**/