div+css实现圆角矩形的几种方法
2013-06-04 17:11
901 查看
1.css3实现圆角矩形,兼容性有问题
2.拼图的方法实现圆角矩形
不过这个在ie7下有问题,下面的会和上面的脱节,所以最好用css hack解决一下.~
css hack
3,直接图片吧,最简单的方式
不过自适应高度的话有些问题,所以小改进一下
最近写网页发现一个问题.~在出现兼容性的问题的时候,发现ie7下和360下是完全一样的问题。。所以如果老板要必须兼容360浏览器的话,那就解决了ie7就可以了~
喜欢讨论的朋友可以加群252799167
<div id="round"></div> #round { padding:10px; width:300px; height:50px; border: 5px solid #dedede; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ }css3的,很多小的浏览器不兼容,360之类的.
2.拼图的方法实现圆角矩形
<style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;} .b1,.b1b{margin:0 5px;background:#999;} .b2,.b2b{margin:0 3px;border-width:2px;} .b3,.b3b{margin:0 2px;} .b4,.b4b{height:2px;margin:0 1px;} .d1{background:#F7F8F9;} .k {height:300px;} </style> </head> <body> <div> <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b> <div class="b d1 k"> <font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font> </div> <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b> </div>
不过这个在ie7下有问题,下面的会和上面的脱节,所以最好用css hack解决一下.~
css hack
3,直接图片吧,最简单的方式
不过自适应高度的话有些问题,所以小改进一下
<style> .top{backgroup:上边带弧度的一小部分} .bottom{backgroup:下边带弧度的一小部分} .content{border-left:1px solid 颜色;border-right:1px solid 颜色} </style> <p class="top"></p> <div class="content"></div> <p class="bottom"></p>这种方式可能也有兼容性的问题,用position解决吧..
最近写网页发现一个问题.~在出现兼容性的问题的时候,发现ie7下和360下是完全一样的问题。。所以如果老板要必须兼容360浏览器的话,那就解决了ie7就可以了~
喜欢讨论的朋友可以加群252799167
相关文章推荐
- css+div实现圆角矩形代码总结
- 纯CSS+DIV实现圆角的三种方法(create a round corner DIV by pure CSS)
- 纯CSS+DIV实现圆角的三种方法
- 用DIV+CSS实现圆角(CSS3之前和之后的方法)
- div+css用边框实现圆角矩形(多样式)
- DIV+CSS边框实现圆角矩形
- css+div制作圆角矩形的四种方法
- DIV+CSS实现圆角
- CSS实现垂直居中的几种方法
- iOS中drawRect方法实现画圆角矩形,顺时针和逆时针
- CSS实现垂直居中的几种方法
- 纯CSS实现垂直居中的几种方法
- div+css无图边框圆角实现思路及代码
- JS+CSS实现Div弹出窗口同时背景变暗的方法
- android中实现“圆角矩形”,贝塞尔曲线的方法
- 【iOS沉思录】UIImage圆角矩形的‘离屏渲染’和‘在屏渲染’实现方法
- 分享用纯CSS实现三列DIV等高布局的方法
- DIV和CSS排版中制作细线条的几种方法
- 纯CSS技术实现可变高度的圆角矩形框-so easy
- 向div元素添加圆角边框的实现方法