首页 > 代码库 > 制作不同形状的border属性

制作不同形状的border属性

一个简单不能在简单的CSS属性:border,随便打开一个网页都会有它的存在,然而,这样一个不起眼的属性,就只是在其他元素的周围加了一个线框或者一条单一的水平线而已。今日我将揭开它神秘的面纱,看看面纱下面到底是何等让人仰慕的面容。

首先来看一看,我们曾经一笔带过的属性是多么的单调,HTML和CSS代码(效果一):

<span class="border"></span>
.border{ width:38px; height:38px; border:1px solid #000; display:inline-block;}

技术分享

 

紧接着把组合的 border 属性里的宽度、类型以及颜色都拆分出来,并且不编写其他的样式属性(display:inline-block;这个是为了整体好看),来看看它本身最基本的面貌,HTML和CSS代码(效果二):

 

 

 1 <span class="border"></span>        <!-- 常见的边框 --> 2  3 <span class="angle"></span>         <!-- 不同颜色的边框 --> 4  5 <span class="angle_top"></span>     <!-- 上 边框 --> 6  7 <span class="angle_right"></span>   <!-- 右 边框 --> 8  9 <span class="angle_bottom"></span>  <!-- 下 边框 -->10 11 <span class="angle_left"></span>    <!-- 左 边框 -->

 

 1 .border{ 2     width:38px; 3     height:38px; 4     border:1px solid #000; 5     display:inline-block; 6 }

技术分享

       (图1)

 1 .angle_top{ 2     border-style:solid;border-width:20px;border-color:#000 transparent transparent; 5     display:inline-block; 6 } 7 .angle_right{ 8     border-style:solid;border-width:20px;border-color:transparent #000 transparent transparent;11     display:inline-block;12 }13 .angle_bottom{14     border-style:solid;border-width:20px;border-color:transparent transparent #000;17     display:inline-block;18 }19 .angle_left{20     border-style:solid;border-width:20px;border-color:transparent transparent transparent #000;23     display:inline-block;24 }

技术分享

              (图2)

 1 .angle_top{ 2     border-style:solid;border-width:20px 20px 0;border-color:#000 transparent transparent; 5     display:inline-block; 6 } 7 .angle_right{ 8     border-style:solid;border-width:20px 20px 20px 0;border-color:transparent #000 transparent transparent;11     display:inline-block;12 }13 .angle_bottom{14     border-style:solid;border-width:0 20px 20px;border-color:transparent transparent #000;17     display:inline-block;18 }19 .angle_left{20     border-style:solid;border-width:20px 0 20px 20px;border-color:transparent transparent transparent #000;23     display:inline-block;24 }

技术分享

              (图3)

 1 .angle_top{ 2     border-style:solid;border-width:20px 20px 0;border-color:#000 transparent transparent; 5     display:inline-block; 6     position:relative; 7 } 8 .angle_top:before{     9     content:"";10     border-style:solid;border-width:20px 20px 0;border-color:#fff transparent transparent;13     position:absolute;14     top:-22px;15     left:-20px;16 }17 .angle_right{18     border-style:solid;border-width:20px 20px 20px 0;border-color:transparent #000 transparent transparent;21     display:inline-block;22     position:relative;23 }24 .angle_right:before{    25     content:"";26     border-style:solid;border-width:20px 20px 20px 0;border-color:transparent #fff transparent transparent;29     position:absolute;30     top:-20px;31     left:2px;32 }33 .angle_bottom{34     border-style:solid;border-width:0 20px 20px;border-color:transparent transparent #000;37     display:inline-block;38     position:relative;39 }40 .angle_bottom:before{    41     content:"";42     border-style:solid;border-width:0 20px 20px;border-color:transparent transparent #fff;45     position:absolute;46     top:2px;47     left:-20px;48 }49 .angle_left{50     border-style:solid;border-width:20px 0 20px 20px;border-color:transparent transparent transparent #000;53     display:inline-block;54     position:relative;55 }56 .angle_left:before{57     content:"";58     border-style:solid;border-width:20px 0 20px 20px;border-color:transparent transparent transparent #fff;61     position:absolute;62     top:-20px;63     left:-22px;64 }

技术分享

              (图4)

制作不同形状的border属性