使用CSS的border属性构建变形边框的方法总结

niumowang   发布时间:2016-06-23 11:00:09   作者:牛魔王的世界观   我要评论
border是最常用的用来制作各种各样div边框的CSS属性,这里我们整理了使用CSS的border属性构建变形边框的方法总结,最主要的还是基于三角形的一些图形变换:

border基础回顾
border 顾名思义就是边框的意思,在 CSS 中,你可以透过 border 的语法来对边框做许多样化的设计变化,例如设定边框的宽度、样式、颜色等等,也可以隐藏边框,原则上 CSS 对于 border 的设计不只局限于 DIV 区块或 span 的边框,也可以应用到其他的网页元素的边框上,例如网页标题的边框、图片的边框(img border)... 等,所有的主流浏览器都支援 CSS border 属性。
CSS border 语法介绍:

CSS Code复制内容到剪贴板
  1. border: 边框粗细 边框颜色 边框样式 ;  

标准的 css border 规则由左至右共有三个参数,每个参数间用半形空格隔开,第一个参数为边框的粗细(border-width),一般使用 px、em 等标准网页单位,第二个参数标示边框的颜色(border-color),可以使用色标准色码或颜色的英文名称,第三个参数是边框样式(border-style),可以设定实线、虚线、双实线、连续点 ... 等许多不同的风格。
简单回顾以后,我们下面来进入正题:

一、border边框变形记
前端开发者对于如何用纯css如何实现三角效果应该有一定了解了。但是大家真正在项目中用到这个效果并不是很多吧,而且并不是每个人都熟谙此纯css打造三角形的原理。所以今天粗拟一文,写给一些对此原理不是很精通的朋友。高手飘过吧!下面来看我是如何通过纯css来实现三角形的效果的。

2016623111307964.png (531×125)

我们首先来看上面一组图形,分别是两个正方形,两个长方形,并且每个形状中都包括不同的图形。值得一提的是这些形状是通过纯css来实现的,比较可喜的是它们兼容ie6…
等边四边形==图形的合体(不许有邪恶的想法!!):
如果你要问这些是如何实现的呢?其实比较简单,只是平时大家很少关注罢了。我们习惯了用border定义边框,因为设计图的原因,大多是定义“1-5”像素的图形,并没有进行过深入的研究,比如border-left与border-top之间的衔接是怎样的呢?想要知道答案很简单,我们只需要将border-width的值增大就可以了,增大后我们会看到border之间的衔接是一条斜线。如上图所示了,下面贴上面部分的代码:

CSS Code复制内容到剪贴板
  1. <div style=”width20pxheight20pxdisplayinline-blockborder40px solid #0f0;  floatleft;”></div>   
  2. <div style=”width20pxheight20pxdisplayinline-blockmargin-left20pxborder-left40px solid #f00border-top40px solid #0f0border-right40px solid #03fborder-bottom40px solid #f70;  floatleft;”></div>   
  3. <div style=”width0pxheight0pxdisplayinline-blockmargin-left20pxborder-left40px solid #f00border-top40px solid #0f0border-right40px solid #03fborder-bottom40px solid #f70font-size: 0; floatleft;”></div>   
  4. <div style=”width0pxheight0pxdisplayinline-blockmargin-left20pxborder-left40px solid #f00border-top40px solid #0f0border-right80px solid #03fborder-bottom40px solid #f70font-size: 0; floatleft;”></div>  

你一定很想了解上面的图形的变形原理了。这里我分步骤解析代码:
首先我们研究图一的代码,发现就是我们平常使用的定义边框的方式:border:40px solid #0f0;这样我们就可以得到一个宽高均为20像素,边框为40像素的正方形;
继续,研究图二的代码,也是很简单实现,只不过给各个边框添加了颜色罢了,不过我们却发现了惊人的变化,每个边框与边框之间竟然是产生了斜线,并且这个时候产生了4个梯形,聪明的你一定会有一种原来如此的感觉,并且同时联想到如果没有中间的空白那样不就产生了三角形了吗…
是的,如你所想,图三就是你脑子中的东西,我们看到代码“width: 0px; height: 0px;”这样空白部分就没有了,不过这时你可能还需要注意一个细节(加粗显示的部分),“font-size: 0”,是的就是这里,为了兼容ie6,去除ie610像素高度的bug(必要的时候需要用到line-height:0;)。至此,我们再告一段落,接下来你是不是想要告诉我,将其他的三个边框颜色转化成背景色就变成了一个三角形呢?是的,的确是这个样子。但是不要着急,我们接下来研究下图四。
同图三只有细微的不同,右边边框的宽度增加了,变成了80像素,然后你看到了产生了4个非直角的三角形,但是这个又有神马用呢?我可以肯定的说,只要用心思考,这个还是比较好玩的,因为我们三角形的领域已经不再局限于直角的了…呵呵,各位看官请继续给下看
正方形变形成三角形:
2016623111346018.png (298×102)

我尽力不拖泥带水完成整个变形过程的注解,但是文笔以及性格的原因,总有磨叽之处,还请见谅!贴上面图形代码:

CSS Code复制内容到剪贴板
  1. <div style=”width0pxheight0pxdisplayinline-blockborder40px solid #fffborder-left-color#f00border-right-color#03ffont-size: 0; floatleft;”></div>   
  2. <div style=”width0pxheight0pxdisplayinline-blockmargin-left20pxborder40px solid #fffborder-left-color#f00border-top-color#0f0font-size: 0; floatleft;”></div>   
  3. <div style=”width0pxheight0pxdisplayinline-blockmargin-left20pxborder40px solid #fffborder-bottom-color#f70font-size: 0; floatleft;”></div>  

即使不看上面代码,你也应该清楚上面几个图形是如何得到的了。没错,定义了一个“border:40px solid #fff /*这里就是背景色*/;”,然后给边框定义不同的颜色值就行了,如果想要显示下面的三角形,只给下面的图形定义颜色即可。
就这么简单了,我们常见的某些小三角就是通过这样的代码来实现的,一般配合着绝对定位(position:absolute;)来使用,就会达到理想的效果了。

二、border变形记之高级进阶
神马,上面还不算结束。呵呵,的确如此,我想说的是通过上面的部分恐怕还不能实现开头图片中的效果。所以我们只能继续加深研究层次了…下面是内涵图出场了。。。
2016623111405111.png (342×104)

做为一名睿智的前端开发人员来说,你一定不会对于上面的做法感到不屑,因为我讲的不仅仅是技术,这还是一项艺术。嘿嘿,痞子出场,讲解继续…首先放码…

CSS Code复制内容到剪贴板
  1. <div style=”width0pxheight0pxdisplayinline-blockborder40px solid #fffborder-left-color#f00font-size: 0; floatleft;”></div>   
  2. <div style=”width0pxheight0pxdisplayinline-blockmargin-left: -70pxborder40px solid #0f0border-left-color#ffffont-size: 0; floatleft;”></div>   
  3. <div style=”width0pxheight0pxdisplayinline-blockmargin-left20pxborder40px solid #fffborder-left-color#f00font-size: 0; floatleft;”></div>   
  4. <div style=”width0pxheight0pxdisplayinline-blockmargin-left: -70pxborder40px solid #0f0border-left-colortransparent; _border-left-color: snow; _filter: chroma(color=snow); font-size: 0; floatleft;”></div>   
  5. <div style=”width0pxheight0pxdisplayinline-blockmargin-left20pxborder40px solid #03fborder-left-color#f00font-size: 0; floatleft;”></div>   
  6. <div style=”width0pxheight0pxdisplayinline-blockmargin-left: -70pxborder40px solid #0f0border-left-colortransparent; _border-left-color: snow; _filter: chroma(color=snow); font-size: 0; floatleft;”></div>  

我感觉做前端的人玩神马找找看,找不同之类的游戏肯定牛X,毕竟整天面对着代码调bug,分析不同类型的代码在不同的浏览器实现的不同效果…呵呵,啰嗦了。你应该看到不一样的地方了。
上面想要实现的效果就是,左边的块要压在右边的块上面,来实现整体的块元素之间的衔接工作。看到这里,我知道您在思考什么,z-index是不是?难道不是,你也想到透明了?那么说明你已经领悟到css三角形的真谛了。

三、border变形记之分步导航效果(火箭组装法)
电视中大家都看到过火箭,以及类火箭形物体。今天我这里讲的技术就是火箭组装是非常不可能的,我要讲的是类似火箭的组装来实现纯css分布导航效果。
大家都知道火箭由最下面的发动机+推进器,中间燃料箱发送机,头上是卫星整流罩等等…大概这么个情况。ok,看我下面的结构
2016623111422837.png (220×61)

看到了上面的图解之后你肯定应该知道自己该干神马了,我们只需要给中间的块一个固定的值,然后左右两边的形状采用相对于中间的块绝对定位就可以了。既然知道了原理,那么就开始行动吧。

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. #step{margin:50px;font-size:16px;color:#fff;letter-spacing:0.5em;}   
  3. #step a{width:100px;height:30px;background:#9BBB38;text-align:center;display:inline-block;line-height:30px;position:relative;margin-right:20px;}   
  4. #step a s{width:0px;height:0px;border:15px solid #9BBB38;border-left-colortransparent; _border-left-color: snow; _filter: chroma(color=snow);font-size:0;line-height:0;position:absolute;left:-30px;top:0px;}   
  5. #step a b{width:0px;height:0px;border:15px solid #fff;border-left-color:#9BBB38;font-size:0;line-height:0;position:absolute;top:0px;rightright:-30px;}   
  6. #step .first{border-left-color:#9BBB38}   
  7. #step .last{border-color:#9BBB38;rightright:-15px;}   
  8. #step .on{background:#E58712;}   
  9. #step .on s{border:15px solid #E58712;border-left-colortransparent; _border-left-color: snow; _filter: chroma(color=snow);}   
  10. #step .on b{border-left-color:#E58712;}   
  11. </style>   
  12. <div id="step">   
  13.  <a><s class="first"></s>注册<b></b></a>   
  14.  <a class="on"><s></s>登录<b></b></a>   
  15.  <a><s></s>下单<b></b></a>   
  16.  <a><s></s>付款<b class="last"></b></a>   
  17. </div>  

如果看到这里你仍旧在问怎么实现神马的巴拉巴拉…那么我只能告诉你:跪求的话我也不告诉你。你只有自己去实践,并且掌握的知识才能是自己的,所以自己去参照上面代码写一个效果,你绝对不虚此览。

四、border变形记之变态版
每个技术人员都在追求是技术的更高层次,更深层次。所以当你以为某个技术点已经结束了的时候,或许之前你所领悟到的仅仅是个开始。关键在于你是否能够利用你掌握的知识去探索并创造。下面一个简单的border变形记的变态版,技术内容很低级,想法还是可以的。欢迎重口味!

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. #arr{position:relative;margin-top:100px;margin-left:100px;}   
  3. #arr a{width:0px;height:0px;border-width:50px 75px;border-style:solid;border-color:transparent;_border-color:snow; _filter:chroma(color=snow);border-left-color:#000;position:absolute;left:200px;top:0px;line-height:0;}   
  4. #arr s{width:0px;height:0px;border-color:transparent;_border-color:snow; _filter:chroma(color=snow);border-left-color:#fff;border-width:50px 20px;border-style:solid;position:absolute;top:0px;left:200px;line-height:0;}   
  5. #arr b{width:150px;height:20px;background:#000;display:block;position:absolute;left:70px;top:40px;}   
  6. </style>   
  7. <div id="arr">   
  8.  <a></a>   
  9.  <s></s>   
  10.  <b></b>   
  11. </div>  

相关文章

  • 在线CSS边框圆角效果代码工具

    这是一款由脚本之家翻译自国外网站的在线CSS工具,可在线调整生成样式的边框圆角效果,以及边框的宽度、颜色、样式等属性,还可实时预览生成的CSS代码,并支持一键复制代码
    2017-09-19
  • css3图片边框border-image的用法

    在CSS3里引入的很多新特征中,这篇文章主要介绍了css3图片边框border-image的用法,具有一定的参考价值,有兴趣的可以了解一下
    2017-06-30
  • border-radius以外的CSS圆角边框制作方法

    用CSS3的border-radius属性来制作圆角边框相当顺手,然而浏览器的兼容问题并不是太好处理,这里我们就来总结一下border-radius以外的CSS圆角边框制作方法.
    2016-06-02
  • 详解CSS的border边框属性及其在CSS3中的新特性

    这篇文章主要介绍了详解CSS的border边框属性及其在CSS3中的新特性,既涵盖了基础的边框宽度与颜色设置又讲到了CSS3中的图片边框及边框渐变,需要的朋友可以参考下
    2016-05-10
  • 深入浅析css3 border-image边框图像详解

    css3中新增了一个属性 border-image ,这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。本文给大家介绍css3 border-image边
    2015-11-24
  • CSS3之边框多颜色Border-color属性使用示例

    Border-color是专为边框的多颜色而准备的属性,接下来为大家介绍一下CSS3之边框多颜色Border-color的使用,喜欢的朋友不要错过
    2013-10-11
  • 一文教你玩转CSS border(边框)

    这篇文章主要介绍了一文教你玩转CSS border(边框),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-19

最新评论