边框
3个值
1、粗细 单位:px
2、样式 实线(solid) 虚线 (dashed) 点线(dotted) ----拆分
border-width border-style border-color 1~4个值 上右下左
3、颜色
单词 十六进制 rgb(128,30,30) rgba() a-不透明的 0~1的取值
border-width:
一个值: 四个方向都是一样的
两个值: 第一个值代表上下方向,第二个值代表左右方向
三个值: 第一个值代表上 第二个值代表左右 第三个值代表下
四个值: 上,右,下,左
边框不重复,重复就变形(三角形、梯形)
边框的拆分样式:(按方向拆分)
border-top
border-right
border-bottom
border-left
边框的拆分样式:(按值来拆分)注意此样式可以分别描述多个方向的边框值:top,right,bottom,left
border-width
border-style
border-color
深入拆分:(方向和值都拆分)
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
问题
(1)同一个标签身上相邻的两条边框的颜色不一样的时候会出现斜角
解决方法: 两个不同的标签,拼接
div1{border-top:100px;}
div2{border-tottom:120px;}
***边框可以撑开元素的宽度
(2)边框实现三角形 ----图标
边框大小 颜色的透明度 transparent 完全透明
高度 取决于自身的border-width值
底边的宽 取决于相邻两条边框的border-width值的总和
直角三角形 方法 (2)
#box{
width:0;
height:0;
border-width:20px 10px 0 0;
border-style:solid;
border-color: #111 rgba(0,0,0,0) rgba(0,0,0,0);
}