不用图片的DIV圆角(兼容各浏览器)

简介:

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


直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< 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 >


直接复制运行即可。

e189.gif





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





相关文章
|
4月前
|
计算机视觉 C++
基于Qt的简易图片浏览器设计与实现
基于Qt的简易图片浏览器设计与实现
212 1
|
1月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
118 0
|
27天前
|
JavaScript 前端开发
如何让div的宽高始终等于浏览器宽高的一半
如何让div的宽高始终等于浏览器宽高的一半
25 2
|
3月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
87 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
2月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
84 0
|
2月前
div高度填满浏览器剩余空间(不出现纵向滚动条)
div高度填满浏览器剩余空间(不出现纵向滚动条)
22 0
|
3月前
|
缓存 算法 API
视觉智能开放平台产品使用合集之如何在Web浏览器中查看处理后的图片
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
146 0
|
4月前
|
域名解析 应用服务中间件 对象存储
解决阿里云oss图片浏览器访问直接下载而不是打开
解决阿里云oss图片浏览器访问直接下载而不是打开
2269 0
|
4月前
|
移动开发 JavaScript
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
166 0
|
4月前
|
前端开发 JavaScript API
如何让 Websocket兼容低版本浏览器
如何让 Websocket兼容低版本浏览器
195 2