注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

2011年9月9日  

2011-01-26 20:28:00|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

世界之大无奇不有,想当年,清政府闭关锁国,造成了技术 经济全面落后的中国。现如今作为一名前端,咱也不能关起门来闭门造车,要多看看行业内一些顶尖的团队的经验心得,今天偶然点开淘宝UED的blog,发现CSS的border的神奇作用!!通过CSS可以做出你想要的三角形也可以做出一些简单的圆角边框,毕竟有些门户网站少发一次图片请求比多一行CSS代码更节省资源!

CSS盒模型
一个盒子包括: margin+border+padding+content
– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
–我们可以通过调整宽度的大小来调节三角形形状.

Example One. 如果我们正常设置一个盒子的边框:2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客

1
2
3
4
5
6
7
#div1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

效果就是上图!

Example Two: 现在我们设置这个盒子的高度和宽度为0!

2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客

1
2
3
4
5
6
7
8
9
10
#div2 {
    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个不同方向的三角形可以诞生了,需要的是你设置它们的背景色!

Example Three:现在我们保留上面来看看,#28
2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客

1
2
3
4
5
6
7
8
9
10
#div3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

这里需要注意的是,IE这位爷素来六亲不认,如果IE6的话 不能写transparent,只能让边框色与背景色相同

Example Four:上面都是小三角的斜边都是依靠原来盒子的一条边,
还有另外一种形式的小三角, 就是斜边在盒子的对角线上:
2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客

1
2
3
4
5
6
7
8
9
10
#div4 {
    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 ;
}

现在保留其中一种颜色, 就可以得到斜边在对角线上的三角形了…
多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形!!
2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客< 像这种不规则的三角形, 延伸一下, 放在气泡框上, 就可以省去拼背景图片的麻烦了,要知道,有些时候多两行CSS和html代码要比多一次图片请求更省的多!
2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客
另外, 关于气泡框, 可以使用棱形字符(◆)来实现, 设置其font-size, 颜色和背景色一致, 定位可以使用margin负值和absolute绝对定位来实现!
———————————————————-
我是分割线
———————————————————-

下面我们来看:Border圆角图案生成
2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客
要想实现上图,简单的CSS+html~~

Html

1
2
3
4
5
<div class="box">
    <div class="top"></div>
    <div class="center">我是一只小小鸟、小小鸟!</div>
    <div class="bot"></div>
</div>

Css

1
2
3
4
5
6
.box{width:500px;}
.top{border-bottom:3px solid; border-top-color:#cc0000; border-bottom-color:#cc0000;
     border-left:3px dotted transparent; border-right:3px dotted transparent;}
.center{padding:10px 20px; color:white; font-size:14px; background:#cc0000;}
.bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc;
     border-left:3px dotted transparent; border-right:3px dotted transparent;}

原理很简单,我们拆开来看,有图有真像:
2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客
简单吧?
不过IE6的话 会有点锯齿状,不过还好,问题不是很大
2011年9月9日 - zhenghaoju700 - zhenghaoju700 的博客

  评论这张
 
阅读(119)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017