习惯养成:用ps测量宽高时 不包含border
1,border(边框)
border:1px solid #000;
(粗细) (样式) (颜色)
页面自动设置
- border-top-color: green;
- border-top-style: solid;
- border-top-width: 1px;
- border-right-color: green;
- border-right-style: solid;
- border-right-width: 1px;
- border-bottom-color: green;
- border-bottom-style: solid;
- border-bottom-width: 1px;
- border-left-color: green;
- border-left-style: solid;
- border-left-width: 1px;
样式
solid 实线
dotted 点线
dashed 虚线
颜色
关键字:green ,red,blue
rgb()
16进制:#000000 #000
2,边框的方向
top left right bottom
border-top-color
border-top-style:solid
border-top-width
3,单独一条边框的形状:非矩形
当同一个元素身上相邻两条边框的颜色不一样的时候会出现斜角
border-width
border-color
四个方向,可以写1~4个值(顺时针)
一个值 四条边的(颜色)或者(宽度)都是一样
两个值 第一个值:上下两条边, 第二个值:左右两条边
三个值 第一个值:上 第二个值:左右 第三个值:下
四个值 上 右 下 左
例子:border-width:10px 20px 30px 40px;
4,边框三角形
div{
width:0;
height:0;
border-width:10px;
border-style:solid;
border-color:transparent transparent #f0a238;
}
透明
边框三角形的宽度 取决于相邻两条边框的宽度(左右相加20px)
边框三角形的高度 取决于自身的边框宽度(底部宽10px)
5,一个知识点:
<style>
div{
width:0;
height:0;
border-width:10px;
border-style:solid;
border-color:transparent transparent #f0a238;
}
div{
width:0;
height:0;
border-width:10px;
border-style:solid;
border-color:transparent transparent #973248;
}
</style>执行上面的div里面代码,后面的不会覆盖前面的。