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

制作不同形状的border属性

2024-11-01 04:19:39   208人阅读

一个简单不能在简单的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属性


联系
我们