不用图片的DIV圆角（兼容各浏览器）

分享一个大家在工作中很实用的一个不用图片就能实现的DIV圆角。希望对大家开发有用：

直接上代码：

<style type="text/css">

.xtop, .xbottom {display:block; font-size:1px;}

.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}

.xb1, .xb2, .xb3 {height:1px;}

.xb2, .xb3, .xb4 {border-left:1px solid #ccc; border-right:1px solid #ccc;}

.xb1 {margin:0 5px; background:#ccc;}

.xb2 {margin:0 3px; border-width:0 2px;}

.xb3 {margin:0 2px;}

.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block;border:0 solid #ccc; border-width:0 1px;line-height:30px;}

</style>

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">

sfs

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

</div>

直接复制运行即可。

本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/925209，如需转载请自行联系原作者

不用图片的DIV圆角（兼容各浏览器）相关推荐

html网页改兼容模型,让DIV+CSS兼容所有浏览器
1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-al ...
Ueditor图片上传不能兼容微信浏览器的解决方案
这个问题花了我两天时间才解决掉,因为在网上没有找到合适的方案,所以想写下来给大家分享下. 当时使用安卓和苹果手机上面的浏览器访问都可以正常使用,就是用微信扫一扫浏览时,图片上传功能死活不能用,后面各种 ...
兼容所有浏览器的CSS3圆角效果
解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案. 前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元 ...
JavaScript 图片的上传前预览（兼容所有浏览器）
功能描述通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点 ● 对于 Chrome.Fire ...
基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载...
2019独角兽企业重金招聘Python工程师标准>>> 最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多.在上传图片之前验证图片的格式,并同时实现预 ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
PS常用工具、常见的图片格式和特点、 IE 浏览器常见兼容问题、CSS Hack
PS常用工具常见的图片格式和特点. IE 浏览器常见兼容问题.CSS Hack PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠 ...
div中文字，图片居中对齐，兼容FF、IE
2010年07月21日星期三 20:11 垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用.假设你将一个导航菜单的高度设 ...
js 下载Base64格式数据图片（兼容主流浏览器）
最近的工作内容和前端有关.需要做一个图片下载的功能,然而后台只提供了byte[] 类型的图片数据,并且返回给前端的是Base64格式图片数据.那么,就遇到了最严重的问题了:浏览器兼容. 展示图片的时 ...

不用图片的DIV圆角（兼容各浏览器）

不用图片的DIV圆角（兼容各浏览器）相关推荐

最新文章

热门文章