首页 > 代码库 > 制作不同形状的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属性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。