属性
border-width:边框宽度
border-style:边框样式
border-color:边框颜色
border-bottom/right/left/top 边框也单独设置一边(例如:border-bottom-style)
缩写:border:边框宽度 边框样式 边框颜色(可省略边框宽度和边框样式,省略之后默认是1px 样式 黑色)
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
div{
width: 200px;
border: solid;
}
</style>
</head>
边框小练习:三角形
原理:将元素的内容宽高设置为零,这样就相当于是一个没有任何内容支撑的空元素。然后用边框撑起这个元素,那么这个元素的总距离就只是边框距离而已了。你要想着如果四周都是相同距离边框撑起的不就是一个正方形了吗,然后每条边框占据四分之一,不就是将正方形划分成等份四分,每部分刚好不就是一个三角啦,嘻嘻嘻聪明的孩纸🤭,下面我们就来看一下具体的实现吧
组合三角形
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 0;
height: 0;
border-style: solid;
border-width:100px ;
border-bottom-color:green ;
border-top-color:yellow ;
border-left-color:pink ;
border-right-color:rosybrown ;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
单个三角形
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 0;
height: 0;
border-style: solid;
border-width:100px ;
border-color: transparent; /* 透明 默认是黑色*/
border-right-color:rosybrown ;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
单个三角形其实很简单,就是让其他三个三角形抹去,那把他们的颜色变透明就好啦。开心完成撩!!!!!😄