浅谈前端CSS中的一个硬核属性-border
前言
了解过前端的都知道，html 所有的标签都离不开border属性，Border,顾名思义，边框，给标签加个边框，就像我们生活中的窗户框子，Border除了可以设置标签的边框之外，还有很多隐藏的特殊功能，比如，可以'画'个图，可以达到和canvas一样的效果。
一、使用border画出一个太极八卦图
1.效果图如下
像这样的八卦图，除了可以使canvas画出来，我们强大的CSS的border属性也可以实现，在这里我们使用的是border的小儿子属性 border-radius ,该属性的作用的为元素添加圆角边框！
语法 ：border-radius: 1-4 length|% / 1-4 length|%;
border-radius:2px;
等价于：
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
按此顺序设置每个 radius的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
2.实现思路图解
3.废话不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.container{
margin: 10% 10%;
}
.tj{
width: 800px;
height: 600px;
}
.tj-left{
float: left;
width: 200px;
height:400px;
border: 1px solid #000000;
box-sizing: border-box;
border-radius:200px 0 0 200px ;
border-left: 1px solid #fff;
background-color: #F5F5F5;
position: relative;
}
.tj-right{
float: left;
width: 200px;
height: 400px;
box-sizing: border-box;
border: 1px solid #000000;
border-radius:0 200px 200px 0;
background-color: #000000;
position: relative;
border-left: none;
}
.left-big-top{
width: 100px;
height: 200px;
background-color:#F5F5F5 ;
position: absolute;
left: 100px;
border-radius: 100px 0 0 100px;
}
.right-big-top{
width: 100px;
height: 200px;
background-color:#F5F5F5 ;
position: absolute;
border-radius: 0 100px 100px 0;
}
.left-small-top{
width: 25px;
height: 50px;
background-color: #000000;
position: absolute;
left: 75px;
top: 75px;
z-index: 100;
border-radius: 25px 0 0 25px;
}
.right-small-top{
width: 25px;
height: 50px;
background-color: #000000;
position: absolute;
top:75px;
z-index: 101;
border-radius: 0 25px 25px 0;
}
.left-big-bottom{
width: 100px;
height: 200px;
background-color:#000000 ;
position: absolute;
left: 100px;
top:200px;
border-radius: 100px 0 0 100px;
}
.right-big-bottom{
width: 100px;
height: 200px;
background-color:#000000 ;
position: absolute;
border-radius: 0 100px 100px 0;
top: 200px;
}
.left-small-bottom{
position: absolute;
width: 25px;
height: 50px;
background-color: #F5F5F5 ;
left: 75px;
top: 75px;
z-index: 100;
border-radius: 25px 0 0 25px;
}
.right-small-bottom{
width: 25px;
height: 50px;
background-color: #F5F5F5;
position: absolute;
top:75px;
z-index: 101;
border-radius: 0 25px 25px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="tj">
<div class="tj-left">
<div class="left-big-top">
<div class="left-small-top"></div>
</div>
<div class="left-big-bottom">
<div class="left-small-bottom">
</div>
</div>
</div>
<div class="tj-right">
<div class="right-big-top">
<div class="right-small-top"></div>
</div>
<div class="right-big-bottom">
<div class="right-small-bottom">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
二、使用border 画一个三角形
1.效果图如下
实现这种效果我们使用了border的属性，我们先来补充一下能量
看下border 的属性
语法:
border-width ；边框宽度
border-color:边框颜色
border-style:边框样式（dotted 点状 solid 实线 double 双线 dashed虚线）
border-width:2px;
等价于
border-left-width:2px;
border-right-width:2px;
border-bottom-width:2px;
border-top-width:2px;
border-color 和border-style 也同border-width 类同,在这里就不粘代码了
2.实现思路图解
3.名人不说暗话，只打暗码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
margin: 200px 200px auto;
}
.sjx{
width: 0px;
height: 0px;
border-top-color: transparent;
border-top-width:200px;
border-top-style: solid;
border-left-color: transparent;
border-left-width:200px;
border-left-style: solid;
border-right-color: transparent;
border-right-width:200px;
border-right-style: solid;
border-bottom-color: chocolate;/*transparent透明色*/
border-bottom-width:200px;
border-bottom-style: solid;
}
</style>
</head>
<body>
<div class="container">
<div class="sjx">
</div>
</div>
</body>
</html>
三、举一反三，实践出真梨
有的小朋友就问了，你搞个三角形，也没啥用处呀，下面我就用三角形来给大家介绍一个小小的应用的呆猫，先上图，看下效果，然后低头或举头沉思上三五千秒。
1.实现思路图解
2.实现此呆猫，需要补充点硬货
（1）解决三角形位移问题，旋转问题,目的是让我们的三角形能给头像戴个小帽子，我们需要补充一些小知识
transform: translateY(20px) translateX(2px) rotateZ(45deg) ;
此属性用来旋转 和实现位移，
rotateZ(angle):沿着 Z 轴的 3D 旋转多少度，括号里面要写度数，一定要带单位deg
translateY(y)：沿着y轴移动,括号里的数字要大于0时,div整个层 往下走（移动）,括号里的值小于0为负数时,div整个层往上走（移动）
translateX(x)：沿着X轴移动,括号里的数字要大于0时,div整个层 往右走（移动）,括号里的值小于0为负数时,div整个层往左走（移动）
（2）星级的实现方法
例如：最高星级5颗星，我们选择一个横向排列5颗星星 的透明背景图，通过控制这个背景图显示的宽度，来选择几颗星，当然这就要求我们在选择背景图的时候，每颗星星的间距保持一致，为实现这一效果，我们需要使用img的常见属性background 的小女儿属性，background:url() left top;
background:url() left top;
url() 引用背景图,
left 距背景图左边的距离 top 距背景图顶部的距离 ，通过 left 和 top 的定位来确定选择的显示背景图中的部分图片
3.客官，上代码啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
margin: 150px 150px auto;
}
.container .info{
margin: 0 auto;
width: 200px;
background-color: #fbfbfd;
position: relative;
}
.sjx{
border-style: solid;
border-width: 50px 50px 50px 50px;
border-color: #5946b2 #5946b2 transparent transparent;
width: 0px;
height: 0px;
position: absolute;
left: 100px;
}
.info .title{
color: #fff;
transform: translateY(20px) translateX(2px) rotateZ(45deg) ;
font-size: 16px;
font-weight: 700;
position: absolute;
left: 150px;
}
.sjx .sjx-content{
padding: 40px 10px auto;
}
.sjx-content .sjx-avtar{
padding-top: 40px;
text-align: center;
}
.sjx-content .sjx-avtar img{
width: 100px;
height: 100px;
border: 5px solid #c7c1c1;
}
.sjx-content span{
display: block;
text-align: center;
margin-top: 3%;
padding-bottom: 10px;
}
.sjx-content .name{
color: #2d64b3;
}
.jb-img{
width: 30%;
height: 20px;
background:url(img/pfss.png) 0 -60px;
margin-left: 35%;
}
</style>
</head>
<body>
<div class="container">
<div class="info">
<div class="sjx">
</div>
<div class="title">
好人
</div>
<div class="sjx-content">
<div class="sjx-avtar">
<img src="img/avtar.jpg" />
</div>
<span class="name">
我是个好人
</span>
<div class="jb-img"></div>
<span>三级级大神</span>
</div>
</div>
</div>
</div>
</body>
</html>
总结
万变不离其根，html中大部分的元素都会使用到border属性，基础中的基础，今天给大家介绍的是怎样使用border和border强大的画图功能，当然border还有其他的神奇的功能，在此由于时间有限，就靠小朋友们耐心去探索发现啦，此外细心的小朋友们，仔细阅读代码后会发现，在代码中还使用了霸王般的功能，三角巾是怎样戴到头像上？想知道其中的原由，且等下篇分解.......
