CSS Border使用小分享
作者:乔花 来源:taobao.com UED Team 发布时间:2010-08-12 14:34:00
之前在懒懒分会上分享的一点关于border画小图的内容, 完整的ppt在这里.
原理
css盒模型
一个盒子包括: margin+border+padding+content
– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
– 调整宽度大小可以调节三角形形状.
示例1
一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图
#test1 { height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px;}
示例2
在上面基础上, 我们把宽高度都设为0时, 会呈现上述的边界斜线.
#test2 { height:0; width:0; overflow: hidden; /* 这里设置overflow, font-size, line-height */ font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px;}
这时, 其实我们已经看到有上下左右四个三角形了..如果, 我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么
示例3
只保留上面的橙色, 看看
#test3 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid; border-width:20px;}
可是, IE6下不支持透明啊~~~, 会出现下图的样子
找到一个在IE6下边框透明的文章中找到解决办法, 如下例
示例4
IE6下, 设置余下三条边的border-style为dashed,,,即可达到透明的效果~ 具体原因可以见参考资料3
#test4 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid dashed dashed dashed; border-width:20px;}
当然, 在IE6下, 不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的.
示例5
上面我们画的小三角的斜边都是依靠原来盒子的边, 还有另外一种形式的小三角, 就是斜边在盒子的对角线上
#test5 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 #3366ff transparent transparent; border-style:solid solid dashed dashed; border-width:40px 40px 0 0 ;}
保留其中一种颜色, 就可以得到斜边在对角线上的三角形了…多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形.
像这种不规则的三角形, 延伸一下, 放在气泡框上, 就可以省去拼背景图片的麻烦了.
另外, 关于气泡框, 可以使用棱形字符(◆)来实现, 设置其font-size, 颜色和背景色一致, 定位可以使用margin负值和absolute绝对定位来实现, 见示例.
应用之圆角生成
应该说是近似圆角,,其实由一个高度非常小的梯形展示出来
- 上梯形(无上边框,下左右3px宽度, 左右颜色去掉)+矩形+下梯形
自适应圆角1:
- 整个rc设置为float: left 或 display: inline-block 分为top,bd,bottom, top中又有两个层rc1和rc2, rc1只设置border-top, 高度为0, 并设置左右margin呈短小的一横线, rc2只设置左右border并且左右margin小于rc1, height为1px, 中间bd设置左右border,不设置左右margin;
- 不过 IE 6&7 出现 bug:rc在IE6中依然显示为dispaly:block,而IE7中top 和 bottom缩成一坨,不肯扩展开来,而在rc1/rc2/rc3 中插入文字xxx后只能扩展到文字宽度,不能与bd对齐.
- 见自适应圆角1
自适应圆角2
- 自 Google 系产品的 1px 圆角按钮,,,三层div, 最外层div1正常设置边框宽度1px, 呈现出上下边框线, 中间div2只设置左右边框, 且把左右margin设置成负值, 呈现出圆角处的4个圆点 内层div3同样只设置左右边框, 同时margin上下空出div2的高度, margin左右也设置与div2相同的负值.
- 见自适应圆角2
其他小问题
- 透明:
IE6浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题,原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(height>=border-width*3),虚线宽长度必须是其宽度的5倍以上(height>=border-width*5),否则点线和虚线都不会出现.
- IE6的奇偶bug:
如果定位外框高度或是宽度为奇数,则IE6下,绝对定位元素的低定位和右定位会有1像素的误差.所以,尽量保证外框的高度或宽度为偶数值.
- IE6的空div高度bug:
IE6下,空div会有莫名的高度,也就是说height:0;不顶用,此时形成的尖角的实际占高于其他浏览器是有差异的.可使用font-size:0; + overflow:hidden;修复此问题.
- filter: chroma滤镜
该属性属性可以设置一个对象中指定的颜色为透明色, 如:
border-color: pink;filter: chroma(color=pink);
参考资料
猜你喜欢
- 原理:建一个栈,每次碰到一个新标签,就与栈顶的标签配对,如果配对,栈顶的标签就出栈,如果不配对,这个新标签就进栈,最终,栈如果是空的,说明所
- 二级域名的解析指向ASP源代码,懂程序的人一看就明白怎么实现了。呵呵!真简单<%@ LANGUAGE =&nb
- 受<! #include file="filename.asp" --> 宏限制必须存在该文件并且会预先编译
- 今天给大家讲的是ASP给图片加水印的知识ASP给图片加水印是需要组件的…常用的有aspjpeg和中国人自己开发的wsImage…前者有30天
- 写这段代码的原因是昨天项目中遇到的一个问题。一同事要求 写一个效果要求鼠标掠过表格行该行颜色改变以突出显示。这个倒不难,那哥们直接为每个Tr
- 如何利用Image Data Type从数据库中读取图片,并在主页中显示图形?然后,写如下代码:< % @&nbs
- 是否曾经有过这样的经历:把一个元素置于另一个元素之上,而希望下面的那个元素成为可点击的?现在,利用css的pointer-events属性即
- 代码如下:<%@LANGUAGE="VBSCRIPT"%> <% option&n
- 两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”,圆角因使人感觉舒适的
- 一、日期类型:对于SQL Server 2008 来说(因为2000甚至2005已经稍微有被淘汰的迹象,所以在此不作过多说明,加上自己工作使
- 今天来说说鄙人对input输入框在处理上的细节处理和心得,其实制作一个符合CSS标准、FF/IE7/IE6等主流浏览器全兼容、符合用户体验的
- 一,fso.GetFile提取文件相应的 File 对象1,getfile.asp<%whichfile=Serv
- 如何在线修改表?具体代码如下:<%Set conn1 = Server.CreateObject(&qu
- 1. ASCII 返回与指定的字符对应的十进制数; SQL> select ascii(A) A,ascii(a) a,ascii(0
- 如何做一个分页程序? 这在ASP中确实容易实现,但需要技巧,看看下面的分页代码和说明: <angu
- 程序图标主要作用是为了使该程序更加具象及更容易理解,除了上述的作用外,有更好视觉效果的图标可以提高产品的整体体验和品牌,可引起用户的关注和下
- 用SQLyog来分析MySQL数据库:SOLyog的下载、安装以及使用很简单。我去了相关网站下载,它只有384K字节大小。它把两个文件(一个
- 现在很多以内容为核心的网站上都在文章底部添加了社会化分享按钮,能让浏览用户在发现一篇有价值的文章时,可以通过社会化网络快速分享给自己的好友,
- 我们经常使用动态创建 JavaScript 的方式来实现 JavaScript 文件的无阻塞(Non-blocking)、并行下载(Para
- 近段时间看了一些论坛上面关于分页的ASP程序依然有许多的关注者,但里面只有代码,没有详细的解释,对于初学者来说,这样总是得不到真正的掌握,此