不使用图片,用css+html实现圆角的边框
2010-06-01 17:28
519 查看
代码
这样做的好处是比较灵活,比用图片做的好控制一些。对于一些不会做图的程序员来说,自己也可以控制效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> .xtop, .xbottom {display:block; background:transparent; font-size:1px;} .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;background: #ffffff;} .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {border-left:1px solid #d4d4d4; border-right:1px solid #d4d4d4;} .xb1 {margin:0 5px; background:#d4d4d4;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} </style> </HEAD> <BODY> <div style="width:500px; text-align:center; margin:auto; "> <strong class="xtop"> <strong class="xb1"></strong> <strong class="xb2"></strong> <strong class="xb3"></strong> <strong class="xb4"></strong> </strong> <div style=" border-right:1px solid #d4d4d4; border-left:1px solid #d4d4d4; width:498px; text-align:center;"> 有效果吗?呵呵 <br /> 有效果吗?呵呵 <br /> 有效果吗?呵呵 </div> <strong class="xbottom"> <strong class="xb4"></strong> <strong class="xb3"></strong> <strong class="xb2"></strong> <strong class="xb1"></strong> </strong> </div> </BODY> </HTML>
这样做的好处是比较灵活,比用图片做的好控制一些。对于一些不会做图的程序员来说,自己也可以控制效果。
相关文章推荐
- 自定义View—使用clipPath或者BitmapShader实现圆角图片
- css实现可扩展的图片背景圆角边框,在IE6,IE7,Firefox下通过测试
- 详细使用Transformations实现圆角或圆形图片
- 在html使用a标签 直接下载图片 不通过后台实现直接下载
- CSS技巧 — 不使用图片实现圆角、阴影、渐变等功能
- Java使用wkhtmltox实现HTML代码生成PDF文档或者图片
- 详细使用Transformations实现圆角或圆形图片
- CSS技巧 — 不使用图片实现圆角、阴影、渐变等功能【转】
- 仅用CSS+HTML实现图片放大功能
- 仅用css+HTML实现图片切换效果
- 利用CSS3的新功能实现(椭)圆角边框和图片边框 (圆角)
- 无需图片,使用CSS3实现圆角按钮[转]
- HTML使用FileReader对象的readAsDataURL()方法实现图片的上传预览效果
- html 使用js+css+html实现图片划过预览效果
- CSS3尝鲜(三):利用CSS3的新功能实现(椭)圆角边框和图片边框
- 使用css3来实现边框圆角效果
- TextView使用自定义HtmlHttpImageGetter实现异步加载网络图片,可限制加载图片数量
- 使用CSS实现圆角边框
- 使用纯CSS实现圆角边框并完美兼容
- 使用PorterDuffXferMode实现自定义的圆角图片